ChartJS Line Charts - remove color underneath lines

问题:

Okay, so I have a ChartJS line chart working that populates directly from data coming for my db. What I need now is to get rid of the color underneath each of the lines. [as seen in the screenshot below].

Here's my HTML:

<div ng-if="hasData">     <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="options" click="onClick"></canvas> <div> 

Here's My JS:

            scope.labels = ['02:00','04:00','06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00'];             scope.series = series;             scope.data = [volumesSelectedDate, volumesPeakDate, volumesModelCapacity];               scope.options = {                 scaleOverride: true,                 scaleStartValue: 0,                 scaleSteps: 11,                 scaleStepWidth: 6910,             }              scope.loadingDailyAppVolumes = false;             scope.hasData = true;           };         scope.onClick = function (points, evt) {             //console.log(points, evt);         }; 

So, how would I go about this? Also, how would I go about manually setting the color for each line?

Example:

selected date: blue, peak date: yellow, model capacity: grey.

Thanks.

回答1:

Check this section on the Chart.js docs. Set the fill property to false within your dataset configuration:

var data = {     labels: ["January", "February", "March", "April", "May", "June", "July"],     datasets: [{         label: "My First dataset",         fill: false,         data: [1, 2, 3]     }] }; 

Specify an array to the borderColor property if you want each line to have a different stroke color:

var myColors = ['red', 'green', 'blue']; // Define your colors  var data = {     labels: ["January", "February", "March", "April", "May", "June", "July"],     datasets: [{         label: "My First dataset",         fill: false,         borderColor: myColors         data: [1, 2, 3]     }] }; 

回答2:

Below solution was working when integrated chart js with Angular

$scope.options = {                     scales: {                       yAxes: [                         {                           id: 'y-axis-1',                           type: 'linear',                           display: true,                           position: 'left'                         }                       ]                     },                     elements: {                         line: {                                 fill: false                         }                     }                 };  <canvas id="" class="col-sm-12 chart chart-line" chart-data="data"                             chart-options="options" chart-colors="colors"> </canvas> 

回答3:

This worked for me:

$scope.color = [{                   backgroundColor: 'transparent',                   borderColor: '#F78511',                 },]; 

回答4:

I solved this issue.

First step. html element inner add <- chart-colors="colors" like this :

<canvas id="line" class="chart chart-line" data="data" labels="labels" chart-colors="colors" legend="true" series="series" options="options" click="onClick"></canvas> 

second step. $scope val colors Add like this :

$scope.colors = [{         backgroundColor : '#0062ff',         pointBackgroundColor: '#0062ff',         pointHoverBackgroundColor: '#0062ff',         borderColor: '#0062ff',         pointBorderColor: '#0062ff',         pointHoverBorderColor: '#0062ff',         fill: false /* this option hide background-color */     }, '#00ADF9', '#FDB45C', '#46BFBD']; 

good luck!

回答5:

I had the same issue, using angular-chart.js and got the desired result with:

$scope.override = {     fill: false }; 

and

<canvas class="chart chart-line"      chart-dataset-override="override"     chart-data="data"> </canvas> 

文章来源: ChartJS Line Charts - remove color underneath lines