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
- How to use a Data Array within a Chart JS dataset?
- How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS
- chartjs is issue with large amount data
- How to show different product name for every bar in chart js
- How do I change the grid line style on the Y axis in Chart.js?
- Chart.js grid lines not hiding
- Trying to load a chart with chart.js, through ajax and php
- Chart.js - How does it calculate Y-Axis on bar chart?
- Chart.js stacked bar chart text on top of the stacked bars
- How to remove a vertical line from the canvas of react-chartjs-2?
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- Line Charts color all greyed out (ng2-charts)
- How to show Y axis ticks for every point in the graph
- Is it possible to add individual labels to Chart.JS bars?
- How to draw the stroke behind bars in Chart.js?
- Chart.Mvc scale begin at 0 - Nullable bool property remains null
- how to put a y-axis and x-axis label while using html and chartjs
- Fill Chart.js bar chart with diagonal stripes or other patterns
- Hide all labels and tooltips in Chart.js and make it very small size
- charts.js stacked bar with polymer's wrapper chart-elements
- create legend from colors saved in const
- Javascript highcharts code similar to image
- Page break in Angular with Chartjs and tables
- Update charts in chartjs and angular
- ChartJS Horizontal Bar is displaying backwards
- chart.js v3 - data decimation not working with zoom plugin
- c# Chart.Js and JSON with NewtonSoft
- How can I effectively adjust the dimensions of a canvas element?
- Stacked line chart not displaying correctly when Xaxis is time