'Chart.js remove the first vertical line
Is there a way to remove the initial vertical line from the chart without removing the values?

here is how my options look like:
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
suggestedMax: maxValue
}
}],
xAxes : [{
categoryPercentage: 1.0,
display : false, // set this to false to hide the labels under the bars
gridLines: {
display: false
}
}]
},
Solution 1:[1]
What you want to remove is probably the border of the chart. In Chart.js v2 I was able to remove this first vertical border by setting drawBorder to false for the grid line configuration:
options: {
scales: {
yAxes: [{
gridLines: {
drawBorder: false
}
}]
}
}
In Chart.js docs it is explained in https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration.
Solution 2:[2]
Try using the chart option, scaleLineColor, and setting the color to have 0 opacity:
new Chart(ctx).Bar(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
});
http://jsfiddle.net/wb3kcunt/33/
If you are using chartjs v2, then the showBorder option in scales.gridLines should do the trick:
options: {
scales: {
gridLines: {
showBorder: false,
}
}
}
See docs: http://www.chartjs.org/docs/#scales
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | marcobiedermann |
