question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

2.6.0: Colored Lines with borderColor.

See original GitHub issue

Hello 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>

screenshot from 2017-07-15 08-58-56

Thankyou Juergen

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
kgrosvenorcommented, Feb 13, 2018

Can we support this, i’m hitting the same barrier?

0reactions
JM2014commented, Jul 15, 2017

Thank you for your fast support…

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found