score:0
Accepted answer
you will have to update to v3 of the lib, then you can make use of the scriptable options like this:
options: {
scales: {
y: {
ticks: {
color: (tick) => (tick.tick.value < 0 ? 'red' : tick.tick.value > 0 ? 'green' : '#666')
}
}
}
}
live example:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [-12, 19, 3, -5, 2, 3],
borderwidth: 1,
bordercolor: 'red',
backgroundcolor: 'red'
}]
},
options: {
scales: {
y: {
ticks: {
color: (tick) => (tick.tick.value < 0 ? 'red' : tick.tick.value > 0 ? 'green' : '#666')
}
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.3.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chart.js: how to set multiple color to tick of y axes if > or < 0
- How set color family to pie chart in chart.js
- how to set chart.js grid color for line chart
- How to set single color on each bar in angular chart js
- How to use set the color for each bar in a bar chart using chartjs?
- How to draw multiple color bar in a bar chart using chart.js
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- react-chartjs-2 how to set multiple background levels within a line chart
- ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- how to not repeat code while creating multiple charts in chart js
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- Chart.js line chart set background color
- chartjs : how to set custom scale in bar chart
- set background color to save canvas chart
- how to create multiple chart on one component vue
- How to set a full length background color for each bar in chartjs bar
- How to set ticks on axes dynamically with chart.js?
- How do you set pie chart colors in angular-chart.js
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add multiple background color in line charts
- ng2-charts: How to set Title of chart dynamically in typescript
- How to add area with break on line chart with fill color
- how to set color for each item in tooltip with ChartJS
- How to use segment property to color line / border color based on value in chart js?
- How do I set a bar chart to default to a suggested maximum in chart.js v1.01?
- How do I remove cartesian axes from chart js?
- How to change color of column in chart js
More Query from same tag
- How to provide empty values for Chart.js data?
- Change mysql x-axes date to day in chart.js
- How to stop resizing chart.js in case hovered and out of boundaries?
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- chart.js in mvc graph are not show
- Use JSON file with chart.js
- Where is the documention for the chart.js Chart constructor?
- Load Chart.js tooltip information asynchronously
- Using Chart.Js to plot a scatter plot from an Array
- How can I express this element?
- Removing chart on click event produces 'removeHoverStyle' of null error
- two xAxes horizontal bar chart Charts.js
- Set custom colours for tooltip squares Chart.js
- Chart.js - Creating Custom Chart Types
- Displaying multiple line graphs on one page
- Overlap horizontalBar graps using ChartJS
- Erro Nova ChartJs SQL Generator when using PostgreSQL
- Chartjs Plugin Deferred throws "Uncaught TypeError: Cannot read property 'plugins' of undefined" error
- How to set ChartJS Axis label with PrimeFaces
- Passing json_encode to chart.js won't work
- Remove zero values from tooltip
- Chart.js Auto Fit Failing
- Chart.js: hide dataset line but keep ticks on y-axis?
- automatic legend translation on chart.js
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- Label issue in doughnut chart using chartjs
- Using chartjs to limit data?
- How to add on click event to chart js
- How to add variable-pie chart to react project?
- Chart Js update legend boxes of graph with graph line style