ChartJS - Different color per data point

Question

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

Answer 1

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"

Answer 2

With recent versions of chart.js I would recommend doing this with scriptable options.

Scriptable options give you an easy way to vary the style of a dataset property (e.g. line point colour) dynamically according to some function you provide. Your function is passed a 'context' object that tells it the index and value of the point etc. (see below).

Most chart properties can be scripted; the dataset properties for each chart type tell you the exact list (e.g. see here for line chart).

Here is how you might use scriptable options on a line chart (based on the example in the docs). On this chart negative data points are shown in red, and positive ones in alternating blue/green:

window.myChart = Chart.Line(ctx, {     data: {         labels: x_data,         datasets: [             {                 data: y_data,                 label: "Test Data",                 borderColor: "#3e95cd",                 fill: false,                 pointBackgroundColor: function(context) {                     var index = context.dataIndex;                     var value = context.dataset.data[index];                     return value < 0 ? 'red' :  // draw negative values in red                         index % 2 ? 'blue' :    // else, alternate values in blue and green                             'green';                 }             }         ],     } }); 

The context object passed to your function can have the following properties. Some of these won't be present for certain types of entity, so test before use.

• chart: the associated chart
• dataIndex: index of the current data
• dataset: dataset at index datasetIndex
• datasetIndex: index of the current dataset
• hover: true if hovered