Line Chart Colours

Topic: Line Chart Colours

nickdownes free asked 6 years ago

I have changed the colours of the line chart as below but am not seeing the colours when I view the chart. Any Ideas please?var ctxL = document.getElementById(\"lineChart\").getContext(\'2d\');var myLineChart = new Chart(ctxL, {type: \'line\',data: {labels: [\"01-01-2016\", \"15-01-2016\", \"01-02-2016\", \"15-02-2016\", \"01-03-2016\", \"15-12-2016\"],datasets: [{label: \"This should be coloured blue\",fillColor: \"rgba(76,137,238,0.8)\",strokeColor: \"rgba(76,137,238,1)\",pointColor: \"rgba(32,33,249,1)\",pointStrokeColor: \"#B5DDFF\",pointHighlightFill: \"#B5DDFF\",pointHighlightStroke: \"rgba(255,33,11,1)\",data: [65, 59, 80, 81, 56, 55, 40]},{label: \"My Second dataset\",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: [28, 48, 40, 19, 86, 27, 90]}]},options: {responsive: true}});

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi, 
You can add like that and it should change colors.
<pre> var ctxL = document.getElementById("lineChart").getContext('2d');
 var myLineChart = new Chart(ctxL, {
 type: 'line',
 data: {
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 datasets: [{
 label: "My First dataset",
 fillColor: "rgba(0,0,0,0.2)",
 strokeColor: "rgba(220,220,220,1)",
 pointColor: "rgba(220,220,220,1)",
 backgroundColor: [
 "rgba(76,137,238,1)",
 ],
 borderColor: [
 "rgba(32,33,249, 0.2)",
 ],

pointStrokeColor: "#fff",
 pointHighlightFill: "#fff",
 pointHighlightStroke: "rgba(220,220,220,1)",
 data: [65, 59, 80, 81, 56, 55, 40]
 },
 {
 label: "My Second dataset",
 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: [28, 48, 40, 19, 86, 27, 90]
 }
 ]
 },
 options: {
 responsive: true
 }
 });
</pre>
Is that resolve your problem?
Best, 
Piotr

Please insert min. 20 characters.

Hi,
You can add like that and it should change colors.

        var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
      type: 'line',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            fillColor: "rgba(0,0,0,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            backgroundColor: [
              "rgba(76,137,238,1)",
            ],
            borderColor: [
              "rgba(32,33,249, 0.2)",
            ],

            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
            label: "My Second dataset",
            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: [28, 48, 40, 19, 86, 27, 90]
          }
        ]
      },
      options: {
        responsive: true
      }
    });

Is that resolve your problem?

Best,
Piotr

nickdownes free commented 6 years ago

Thank you very much Piotr, will changing the fillColor, strokeColor, pointStrokeColor, pointHighlightFill or pointHighlightStroke colours make any difference? should/can they be ommited.

Piotr Glejzer staff commented 6 years ago

I'm really confused but you don't have to change it to change color and you can omit this (for now). I don't know why it's not working. We will fix that. Best, Piotr

nickdownes free commented 6 years ago

Ok Thanks again for your time Piotr, your fix has changed the colour which is what I wanted to do in the first place, I was really just wondering if the other attributes were working. Thanks a lot.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

nickdownes

0Support score
1Questions 0Answers 0Snippets