ng2-charts icon indicating copy to clipboard operation
ng2-charts copied to clipboard

[BUG] borderColor does not work with array value

Open CosminBadea1 opened this issue 4 years ago • 1 comments

Desired behaviour:

  • up until the 3rd value, line color is red, afterwards blue

Actual result:

  • line gets a light-grey color

image

Mentions:

  • tried using borderColor with single value and the resulted line had the correct color

Version ng2-charts: "2.3.2"

Are there any workarounds for this issue?

Color properties:

` public barChartColors: Color[] = [ borderColor: ['red)', 'red', 'red', 'blue', 'blue', 'blue'], backgroundColor: 'rgba(0, 0, 0, 0)', borderWidth: 3, ]

public barChartLabels: Label[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];

public barChartData: ChartDataSets[] = [ {data: [40, 55, 70, 75, 20, 65], label: 'Random', type:'line'}, ]; `

CosminBadea1 avatar Jun 04 '20 17:06 CosminBadea1

Chart.js does not support multiple line colors out of the box, but there is a way to override the default line rendering and add support: https://github.com/chartjs/Chart.js/issues/4895#issuecomment-341874938

Here is a jsfiddle with it https://jsfiddle.net/egamegadrive16/zjdwr4fh/

image

danmana avatar Sep 23 '20 07:09 danmana