ChartJS - 每个数据点的不同颜色

2022-01-22 00:00:00 linechart angularjs javascript chart.js

Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value?

I found this example for dxChart - https://stackoverflow.com/a/24928967/949195 - and now looking for something similar for ChartJS

解决方案

For chartjs 2.0 see this following answer.

Original answer below.


Good question regarding ChartJS. I've been wanting to do a similar thing. i.e dynamically change the point colour to a different colour. Have you tried this below. I just tried it and it worked for me.

Try this:

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ; 

Or Try this:

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

Or even this:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

Then do this:

myLineChart.update();

I guess you could have something like;

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

Give it a try anyway.

相关文章