score:80
Accepted answer
It is possible to either remove the grid lines or have them display in a different color.
In both options.scales.xAxes
and options.scales.yAxes
you can add
gridLines: {
display: false ,
color: "#FFFFFF"
},
(obviously you do not need to assign a colour if you are not disaplying them)
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: chartColors.red,
borderColor: chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
}, {
label: "My Second dataset",
fill: false,
backgroundColor: chartColors.blue,
borderColor: chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<div style="width:100%;">
<canvas id="canvas"></canvas>
</div>
score:-1
Try this:
options: {
scales: {
x: {
display: true,
grid: {
display: false
},
},
y: {
display: true,
grid: {
display: false
},
}
}
}
score:6
Since v3 the scales have been changed so if you want your gridlines to have a different color you will need to configure it in options.scales[scaleID].grid.color
:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
grid: {
color: 'white'
}
},
x: {
grid: {
color: 'red'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chartjs change grid line color
- ChartJS Line Charts - remove color underneath lines
- Can't change color line with chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- Change point size and color on hover in chartjs
- Change point color on click using ChartJS
- Chartjs Line Color Between Two Points
- How to change the color of legend in chartjs and be able to add one more legend?
- Chartjs change the specific label color in x axis in callback function
- In ChartJS is it possible to change the line style between different points?
- How to change line segment color of a line graph in Chart.js?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Chartjs Radar - Change color of end point labels
- how to set chart.js grid color for line chart
- ChartJS -- How do I change scale color when I have to scales?
- How to change grid line width for one specific line
- Different color for line segments in ChartJS
- ChartJS click on bar and change it's background color
- Angular 8 & ChartJs change color in pie chart
- How to change line segment color based on label value in chart.js?
- Specific grid line in X axis in ChartJs
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- Change Axis Line color in Chart created using chart.js
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- change stroke line color in chart according to datasets in react native
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Remove background color in chartjs line chart
- Change font size and font color in Chartjs Angular 5
- Change color of line along labels Chart.js
More Query from same tag
- chartjs V3 align legend text
- How to hide row in chartJS when filtering?
- Chart JS display Data Value on the top of the Bar
- Chartjs with Node.js : Unexpected token <
- How to make chart which has both positive and negative value, starts with 0 - x axis
- change legend in chart in report builder
- how to add legend in pie chart
- How to add a chart with a table in Chart.js?
- Displaying Chart with data retrieved from Entity Framework in Controller
- Chart, X and Y-Axis labels are blurred in horizontal bar chart using chart.js
- ChartJS using multiple Y axes
- downhole chart - recharts or chart.js or anything else?
- How to create a chart with chartjs.org with data from an array?
- NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
- How to set same borderColor and backgroundColor in chartjs javascript
- Chartjs: Overwrite plot y-axis integer labels to some string value
- How do i have to implement my code to get correct json?
- How to change line segment color based on label value in chart.js?
- How to just show x-axis (at y = 0) using chartkick (chart.js)?
- AngularJS Charts not updating data correctly
- Chartsjs 2 (Alpha) not working in IE8 (even with excanvas)
- chart.js with null data point in dataset
- Is there a global setting in Chart.js for beginAtZero?
- Can't bind to 'data' since it isn't a known property of 'canvas'
- How to change background color in ng2-charts
- Chart.JS Time Axis Not Parsing
- Chart.js not installing with NPM
- Using custom dataformat in chart.js for Multi Axis Line Chart
- Adding responsive text inside chart in Charts Js
- Accessing data from the callback function of a bar chart using chart js