CODEWITHSUNDEEP
angularjschart.js2
user3946910
user3946910

Reputation: 69

display specific color for lines in chart.js line chart

I have a multi line chart using chart.js version 2.4 and angular-chart.js.I want to display the 2 lines in red and green respectively and I donot want to fill color beneath lines .How can i achieve this?

var app=angular.module("app", ["chart.js"]);

app.controller("LineCtrl", function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July","August","September","October","November","December"];
$scope.series = ['one', 'two'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40, 30, 70, 30, 70, 30],
[28, 48, 40, 19, 86, 27, 90, 35, 70, 62, 75, 60]

]; 

$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
  yAxes: [
    {
      id: 'y-axis-1',
      type: 'linear',
      display: true,
      position: 'left'
    },
    {
      id: 'y-axis-2',
      type: 'linear',
      display: true,
      position: 'right'
    }
  ]
  }
 };
});

Upvotes: 0

Views: 711

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Do something like this,

ctrl.datasetOverride = [{
        fill: false,
        backgroundColor: [
            "#ED402A",
            "#36A2EB",
            "#FFCE56"
        ]
    }, {
        fill: false,
        backgroundColor: [
            "#F0AB05",
            "#36A2EB",
            "#FFCE56"
        ]
    }

];

DEMO

Upvotes: 1

Related Questions