ChartJS - Different color per data point

问题

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

回答1:

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.

回答2:

In updating to version 2.2.2 of ChartJS, I found that the accepted answer no longer works. The datasets will take an array holding styling information for the properties. In this case:

var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: pointBackgroundColors
            }
        ]
    }
});

for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
    if (myChart.data.datasets[0].data[i] > 100) {
        pointBackgroundColors.push("#90cd8a");
    } else {
        pointBackgroundColors.push("#f58368");
    }
}

myChart.update();

I found this looking through the samples for ChartJS, specifically this one: "Different Point Sizes Example"

回答3:

Here's what worked for me (v 2.7.0), first I had to set pointBackgroundColor and pointBorderColor in the dataset to an array (you can fill this array with colours in the first place if you want):

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: [],
                pointBorderColor: [],
            }
        ]
    }
});

Then you can monkey with the colours of the points directly:

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

Some other properties to play with to distinguish a point: pointStrokeColor (it apparently exists but I can't seem to get it to work), pointRadius & pointHoverRadius (integers), pointStyle ('triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'), though I can't seem to figure out the defaults for pointRadius and pointStyle.

回答4:

Just adding what worked for me in the new 2.0 version.

Instead of:

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

I had to use:

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

Not sure if that's because of a change in 2.0 or because I'm using a bar chart and not a line chart.

回答5:

If you initialize the myChart in this manner,

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

you have to change line color by this code

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

If you initialize the myChart in this manner,

myBar = new Chart(ctx).Line(barChartData, {

you have to change line color by this code

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

来源：https://stackoverflow.com/questions/28159595/chartjs-different-color-per-data-point

标签

javascript

angularjs

linechart

chart.js