I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want:
The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything about hiding those "Grid Lines".
How can I remove the grid lines?
I found a solution that works for hiding the grid lines in a Line chart.
Set the gridLines color to be the same as the div's background color.
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
or use
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
From version 3.x, onwards use this syntax.
Refer to chart.js migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
If you want them gone by default, you can set:
Chart.defaults.scale.gridLines.display = false;
If you want to hide gridlines but want to show yAxes, you can set:
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
The code below removes remove grid lines from chart area only not the ones in x&y axis labels
Chart.defaults.scale.gridLines.drawOnChartArea = false;
OK, nevermind.. I found the trick:
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
In chartjs 3 there is a little difference in accessing this configuration. The name of the property is not gridLines, but grid, as it is shown in the official documentation:
options.gridLines was renamed to options.grid
Source:
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks
Here is how it looks:
const options = {
scales: {
x: {
grid: {
display: false,
},
},
},
};
Please refer to the official documentation:
https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
Below code changes would hide the gridLines:
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
An update for ChartJS 3:
const options = {
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
// display: false,
color: 'rgba(217,143,7,0.1)',
},
},
},
}
this did it for me on my react project
scales: {
xAxis:{
grid: {
display: false
}
}
}
i hope this helps
Related
I have a line chart in Chartjs. I want to be able to remove the x-axis and y-axis data from visibilty so it only shows the line.
Below is the codepen that I am working with.
codepen.io
The code I have is the below.
<html>
<style>
body{
background:none;
}
canvas {
background-color: white;
color:black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
});
</script>
</body>
</html>
ticks: { display: false } will take care of that.
scales: {
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}],
}
I have this part of my chartjs code below, I would like to make the data on y-axis-b always have two decimals even if it's "0", I did some research and found this callback here on Stackoverflow, but it applies to both y-Axes, how can I have it apply to only y-axis-b? Thanks!
options: {
tooltips: {
mode: 'index',
callbacks: {
label: (tooltipItem, data) => {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
return label + ' ' + (Math.round(tooltipItem.yLabel * 100) / 100).toFixed(2);
}
}
},
scales: {
xAxes: [{
barPercentage: 0.6,
ticks: {
min: 0
}
}],
yAxes: [{
ticks: {
reverse: false,
suggestedMax:100,
beginAtZero: true,
},
position: "right",
id: "y-axis-b",
scaleLabel: {
display: true,
}
}, {
gridLines : {
drawOnChartArea: false
},
scaleLabel: {
display:true,
},
position: "left",
id: "y-axis-a",
ticks: {
suggestedMax: 1500,
suggestedMin: -1500
}
}]
}
}
Instead of using label in options/tooltips/callbacks, use ticks in options/scales/y like this example.
So your code becomes:
options: {
scales: {
y: {
ticks: {
// Customize your label here
callback: function(value, index, values) {
return value.toFixed(2);
}
}
}
}
}
I am working with chart.js to show some bar charts in reports. I was able to successfully integrate it in to my rails application and the bar charts are working fine.
For displaying data labels, I have used this plugin which also seems to work fine.
The problem I am facing now is the label styling. I am successfully able to change the color and font of the labels but unable to modify the letter spacing. I feel the labels are looking a bit cramped and vertically elongated and letter spacing would make it look better. I have attached the chartJS code and screenshot below.
Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';
Chart.defaults.global.legend.display = false;
// Chart.defaults.global.tooltipenabled = false;
$('.bar-chart-basic').each(function (i,obj)
{
var ctx = this.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(1, '#76ddfb');
gradient.addColorStop(0, '#2471a2');
var x_values = JSON.parse(obj.dataset.x_axis)
var y_values = JSON.parse(obj.dataset.y_axis)
var data = {
labels: x_values,
datasets: [{
data: y_values,
backgroundColor: gradient,
display: false,
scaleLabel: ""
}]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
responsive:true,
maintainAspectRatio: false,
datalabels: {
display:false
},
legend:{
display: false,
labels: {
fontSize: 0
}
},
options: {
hover: { mode: null,animationDuration:0 },
tooltips: {enabled: false },
layout: {
padding: {
left: 0,
right: 0,
top: 18,
bottom: 0
}
},
plugins: {
datalabels:
{
align: function()
{
return 'end';
},
anchor: 'end',
color: function() {
return 'slategrey';
},
font: {
size: 8.5
},
opacity: 1,
formatter: function(value, context) {
div_id = context.chart.canvas.id;
var y_labels = JSON.parse(context.chart.canvas.dataset.labels)
display_text = y_labels[context.dataIndex]
return display_text
}
}
},
scales: {
yAxes: [{
display: false,
gridLines: {
display:false,
color: '#6c757d'
},
ticks: {
// max: Math.max.apply(Math,data.datasets[0].data.map(function(x) {return Math.abs(x)}))*2.5,
beginAtZero: true
}
}],
xAxes: [{
barPercentage: 1.0,
barThickness:20,
gridLines: {
display: false,
drawBorder: false
},
ticks: {
fontSize: 8 ,
fontStyle: "bold",
fontColor: "slategrey"
}
}]
}
}
});
});
Happy to give more clarity.
UPDATE
With the help of the comment by Joel Hager was able to add line spacing by editing the canvas css. But still unable to update line height of the label
For some reason the xAxes of my chart goes from most recent data to oldest date. I obviously want it the other way around / the normal way. How do I revert the xAxes? .. or just the xAxes to act normally with dates.
My chart is here: https://www.betscout.com/tips (Click the Stats tab)
I've already tried this option: https://jsfiddle.net/marineboudeau/4awme3fp/3 - but it doesn't work, not even in the provided example (nothing change when I replace reverse: true with reverse: false.)
I can easily reverse the yAxes this way, so why not xAxes?
Here's some of my JS code:
let chart = document.getElementById('chart');
let myLineChart = new Chart(chart, {
type: 'line',
data: {
labels: grades,
datasets: [{
data: numbers,
label: 'Total profit',
fill: false,
borderColor: '#3771a3'
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
display: true,
reverse: true,
fontSize: 12
}
}]
}
}
});
}
I think it is still being discussed as to why it isn't working, you could do numbers.reverse() and grades.reverse() until it it fixed. fiddle
I have been working with some Chart.js and I have been trying to figure out how to remove the axis lines on a chart.
You can see the grid lines I am trying to remove in this image.
I have managed to remove the grid lines that appear within the chart where the data is represented, but I am having an issue removing these two lines.
You can see the chart.js I have created for the chart below.
var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: <?php echo $cause_label_json?>,
datasets: [{
backgroundColor: benefactoGraph_colours,
data: <?php echo $cause_value_json?>
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
},
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
Any suggestions would be much appreciated.
You need to set the drawBorder property of grid-lines to false in order to remove those axis lines, like so :
...
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
drawBorder: false //<- set this
},
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false //<- set this
}
}]
}
...
You can set display: false in your axis object
scales: {
xAxes: [{
display: false,
gridLines: {}
}],
yAxes: [{
display: false,
gridLines: {}
}]
}
The other answers are correct for different versions of chart.js, but as of Jan 2020, with version 2.9.3, I was able to resolve the issue by nesting display: false inside of gridlines as follows:
...
, options:
scales: {
xAxes: [{
gridLines: {
display: false
},
...
Here's a related GitHub issue.