Line Chart Colours


Topic: Line Chart Colours

nickdownes 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}});

Piotr Glejzer staff answered 6 years ago

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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No