javascript - ChartJs: Different Fill Colour Between Data Points - Stack Overflow

admin管理员组

文章数量:1287913

I'm trying to change the fill color between a few data points e.g. between point 1,2 is black, and between point 3-5 is red.

An example is with amCharts: /

I have tried changing the fillColor property of a point but all that seems to do is just change the fill color of the dot.

var chart = new Chart(ctx).LineWithLine(data, options);

chart.datasets[0].points[0].fillColor = "purple";
chart.datasets[0].points[1].fillColor = "purple";
chart.datasets[0].points[2].fillColor = "purple";
chart.update();

If I change the fill color in the options however, I see the fill color of the chart changes as expected. Am I using the wrong property or is there a bug in the library?

JS Fiddle: /

p/s: This question only changes the colour of the dot, which is not what I want.

I'm trying to change the fill color between a few data points e.g. between point 1,2 is black, and between point 3-5 is red.

An example is with amCharts: http://www.amcharts./demos/line-with-changing-color/

I have tried changing the fillColor property of a point but all that seems to do is just change the fill color of the dot.

var chart = new Chart(ctx).LineWithLine(data, options);

chart.datasets[0].points[0].fillColor = "purple";
chart.datasets[0].points[1].fillColor = "purple";
chart.datasets[0].points[2].fillColor = "purple";
chart.update();

If I change the fill color in the options however, I see the fill color of the chart changes as expected. Am I using the wrong property or is there a bug in the library?

JS Fiddle: https://jsfiddle/hdnu4bpa/

p/s: This question only changes the colour of the dot, which is not what I want.

• javascript
• charts
• chart.js

Share Improve this question Follow edited Nov 19, 2015 at 4:38 potatopeelings 41.1k88 gold badges9696 silver badges121121 bronze badges asked Nov 19, 2015 at 1:26 Jun Wei LeeJun Wei Lee 1,0221111 silver badges2525 bronze badges 2

• Here's a jsfiddle of the solution posted by @potatopeelings jsfiddle/hdnu4bpa/2 – Jun Wei Lee Commented Nov 19, 2015 at 2:34
• Here's an updated fiddle with the chartjs dependency updated to use https. jsfiddle/hdnu4bpa/14 – Jun Wei Lee Commented Feb 9, 2018 at 9:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

The fill color is for the entire series and not for areas between points.

However, since you don't have tooltips (you had tooltipEvents set to an empty array), you can achieve what you want using 3 different series and the fact that Chart.js does not plot null values.

---

Different fillColors for a Line

Here's what its going to look like

We make 3 series (you could do this programmatically if your data and ranges are dynamic - that's more of a JavaScript question than a Chart.js one though)

var data = {
    labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
    datasets: [{
        data: [12.5, 3.1, null, null, null],
        fillColor: "rgba(151,205,187,0.2)",
        strokeColor: "rgba(151,205,187,1)",
        pointColor: "rgba(151,205,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,205,187,1)",
    }, {
        data: [null, 3.1, 3.3, 4.2, null],
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
    }, {
        data: [null, null, null, 4.2, 15.5],
        fillColor: "rgba(205,151,187,0.2)",
        strokeColor: "rgba(205,151,187,1)",
        pointColor: "rgba(205,151,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(205,151,187,1)",
    }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var options = {
   showTooltips: false,
   datasetFill: true,
}

var chart = new Chart(ctx).Line(data, options);

I've just adapted the code from your fiddle to show the relevant bits (it would work equally well with your LineWithLine extension)

You can rearrange the series if you want a certain color to e up on top at the junctions (-10m and -2m in your data). The later series' color takes precedence.

---

Fiddle - https://jsfiddle/kurtybra/

本文标签： javascriptChartJs Different Fill Colour Between Data PointsStack Overflow