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.
Related
I'm using chart.js to build my charts, but felt the need to create a stacked chart inline, but using the stacked:true property doesn't seem to work
Here is my code
var chart1 = new Chart(document.getElementById("invests2").getContext("2d"), {
type: "line",
options: {
layout: {
padding: 0
},
elements: {
point:{
radius: 0
},
},
responsive: true,
bezierCurve: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked:true,
display: true,
scaleLabel: {
display: true,
},
ticks: {
maxTicksLimit:100,
fontSize:12,
maxRotation: 0,
minRotation: 0
},
gridLines: {
display: false,
}
}]
}
},
data: {
labels: ['01/04/2018','01/05/2018','01/06/2018','01/07/2018','01/08/2018','01/09/2018'],
datasets: [{
type: 'line',
label: 'Tit. Publicos',
data: [20940429854.44,19639459015.81,19191914837.46,19290826114.34,19702912802,21274400792.07]
},
{
type: 'line',
label: 'Tit. Privados',
data: [315734585.11,332328878.86,349823178.63,343130519.19,342839692.62,367877901.82,]
}
]
},
});
The look presented was this
But i need this
Stacked:true not work for line chart?
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
I want to align the y-axis tick labels below the gridLines of linechart in chartJS.
Here's what I've got so far:
But, i want to display same:
My options:
options={{
legend: { display: false },
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
display: false,
gridLines: {
display: false,
drawBorder: false
}
}
],
yAxes: [
{
// display: false,
ticks: {
maxTicksLimit: 4,
// labelOffset: 10,
// display: false
},
pointLabels: {
fontColor: '#E14640',
fontSize: 11
},
gridLines: {
display: true,
drawBorder: false,
color: '#898989',
maxTicksLimit: 3,
borderDash: [3, 5]
}
}
]
},
plugins: {
datalabels: {
display: false
}
}
}}
I'm not able to find any option in the chart options to do such a thing. Please help
Updated: 2019/01/10
I found two solution:
Use chartjs plugin, use chart plugin event then draw text below gridlines
Recommended: get ticks from chartjs (in example: ticks: [0,5,10])
and get height of chart. Create some ticks label (with html) and
append into chartjs (use position: absolute)
ps. sorry, my skill english is very bad!
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 want to draw a bar plot with chart.js using this code (very simple):
this.plotEnergy = new Chart($('#plotEnergy'),
{
type: 'bar',
animation: false,
data:
{
labels: ["aaa", "bbb"],
datasets: [ {
label: "ijoij",
backgroundColor: '#000000',
data: [2000, 2300]
},
{
label: "ijooijojij",
backgroundColor: '#FF00FF',
data: [1500, 2500]
},
]
},
options:
{
tooltips:
{
mode: 'index',
intersect: false
},
title:
{
display: true,
text: 'Generated energy'
},
responsive: true,
scales:
{
xAxes: [
{
stacked: 'false',
position: 'bottom',
}],
yAxes: [
{
stacked: false,
scaleLabel:
{
display: true,
labelString: 'Energy [kWh]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
But I get this: The labels are showed correctly, even the y-axis range is correct. But the bars don't show up. I can click on the legends items to make the corresponding data disappear and the y-axis range would adapt correctly.
Anyone has an idea?