2.6.0: Colored Lines with borderColor.
See original GitHub issueHello Chart-js,
first of all: THANKYOU for this great library! It really helps me within my projects!
Now my issue: I am trying to create a line chart with colored lines, but unfortunately it seems for me, that the “borderColor” inside datasets property does not work with color arrays.
The color between the point are grey, I would expect some color.
Chart.js Version: 2.6.0
This is my code:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="Chart.bundle.js"></script>
<div style="width:25%;">
<canvas id="myChart"></canvas>
</div>
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontSize = 16;
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50],
pointBackgroundColor: ['red', 'green', 'blue','yellow'],
borderColor: ['red', 'green', 'blue','yellow'],
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 50,
suggestedMax: 100,
}
}]
}
}
});
</script>
</body>
</html>
Thankyou Juergen
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Chart.js - Line charts with different colors for each border lines
I am trying to figure out why array values for borderColor and backgroundColor are not working. I am using chart.js 2.6.0 via ...
Read more >Colors | Chart.js
Colors. Charts support three color options: for geometric elements, you can change background and border colors;; for textual elements, ...
Read more >Settings disappeared after update – how do I get these lines colored ...
After the update of today leiuder almost all settings were gone. I had to make everything new. 1. How do I get these...
Read more >Can't change the color of grid and ticks in a line chart to color: white...
I started with this Chartjs page https://www.chartjs.org/samples/2.6.0/charts/line/multi-axis.html. I can plot this chart on a (green) colored background, ...
Read more >border-color - CSS: Cascading Style Sheets - MDN Web Docs
Syntax · When one value is specified, it applies the same color to all four sides. · When two values are specified, the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Can we support this, i’m hitting the same barrier?
Thank you for your fast support…