[Chartjs]-Ng2charts using borderColor with array value

by

0👍

If I correctly understand your question, you want to have different line colors between the data points. This can be done by extending an existing line chart as shown in this StackBlitz. Note that this approach doesn’t use ng2-charts.

A simpler and probably better suited solution would be to use the Plugin Core API afterLayout hook. In there, you can create a linear gradient through CanvasRenderingContext2D.createLinearGradient().

lineChartPlugins = [{
  afterLayout: chart => {
    var ctx = chart.chart.ctx;
    var xAxis = chart.scales['x-axis-0'];
    var gradientStroke = ctx.createLinearGradient(xAxis.left, 0, xAxis.right, 0);
    var dataset = chart.data.datasets[0];
    dataset.colors.forEach((c, i) => {
      var stop = 1 / (dataset.colors.length - 1) * i;
      gradientStroke.addColorStop(stop, dataset.colors[i]);
    });
    dataset.backgroundColor = gradientStroke;
    dataset.borderColor = gradientStroke;
    dataset.pointBorderColor = gradientStroke;
    dataset.pointBackgroundColor = gradientStroke;
    dataset.pointHoverBorderColor = gradientStroke;
    dataset.pointHoverBackgroundColor = gradientStroke;
  }
}];

Please have a look at the following StackBlitz.

StackBlitz shows an example that doesn’t use ng2-charts.

Leave a comment