ChartJS Line Charts - remove color underneath lines
JavascriptAngularjschart.jsJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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]
}]
};
Solution 2 - Javascript
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>
Solution 3 - Javascript
Just set the fill option to be false in the datasets options:
data: {
datasets: [{
label: "",
data: dataPoints,
borderColor: color ,
fill:false //this for not fill the color underneath the line
}]
},
Solution 4 - Javascript
This worked for me:
$scope.color = [{
backgroundColor: 'transparent',
borderColor: '#F78511',
},];
Solution 5 - Javascript
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!
Solution 6 - Javascript
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>
Solution 7 - Javascript
just tweak ts file to include ::
chartOptions = {
scales: { xAxes: [{}], yAxes: [{}] },
elements: { line: { fill: false } }
};
html file looking as ::
<div style="display: block; width: 500px; height: 400px;">
<canvas
baseChart
[chartType]="'line'"
[datasets]="chartData"
[labels]="chartLabels"
[colors]="lineChartColors"
[options]="chartOptions"
[legend]="true"
(chartClick)="onChartClick($event)">
</canvas>
</div>
This will Work
Solution 8 - Javascript
Set fill:
value false
let chart = new Chart('myChart', {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false, // <-- Here
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>