I'm using Chart.js for one of my projects. In which I want to remove border from x/y axis. Any help would be really helpful. Refer Attached Image Please not that I'm not referring to the GridLines(Which I already turned off using scaleShowGridLines : false)
Chart Script
var topVideos = {
labels : ["","","","",""],
datasets : [
{
fillColor : "rgba(2,137,203,1)",
strokeColor : "rgba(220,220,220,0)",
highlightFill: "rgba(2,137,203,0.8)",
highlightStroke: "rgba(220,220,220,0)",
data : [90000, 200000, 70000, 100000, 180000 ]
}
]
}
window.onload = function(){
var ctx = $("#topvideos").get(0).getContext("2d");
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
responsive : true,
barShowStroke: false,
scaleShowGridLines : false,
barValueSpacing : 7,
barDatasetSpacing : 30,
});
}
Thanks in Advance.
I'm using Chart.js for one of my projects. In which I want to remove border from x/y axis. Any help would be really helpful. Refer Attached Image Please not that I'm not referring to the GridLines(Which I already turned off using scaleShowGridLines : false)
Chart Script
var topVideos = {
labels : ["","","","",""],
datasets : [
{
fillColor : "rgba(2,137,203,1)",
strokeColor : "rgba(220,220,220,0)",
highlightFill: "rgba(2,137,203,0.8)",
highlightStroke: "rgba(220,220,220,0)",
data : [90000, 200000, 70000, 100000, 180000 ]
}
]
}
window.onload = function(){
var ctx = $("#topvideos").get(0).getContext("2d");
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
responsive : true,
barShowStroke: false,
scaleShowGridLines : false,
barValueSpacing : 7,
barDatasetSpacing : 30,
});
}
Thanks in Advance.
Share Improve this question asked Nov 15, 2015 at 19:55 SreeSree 5561 gold badge7 silver badges23 bronze badges5 Answers
Reset to default 4options : {
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
}
}]
}
};
I think you are using a fork of Chart.js and not the actual chart.js (since the current stable version doesn't have horizontal bars)
In Chart.js, you can set the scale line color to a transparent value, like so
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
scaleLineColor: "rgba(0,0,0,0)",
...
If the fork is from a version after this, the same options should work in your forked library as well.
In Chart.js 3.5.1 there is a drawBorder property which accepts boolean value. If true, the border is drawn at the edge between the axis and the chart area.
options: {
scales: {
x: {
...
grid: {
drawBorder: false,
},
},
y: {
...
grid: {
drawBorder: false,
},
},
},
}
For v4 there is a border configuration options.scales[scaleId].border;
options: {
scales: {
x: {
...,
border:{
display:false
},
},
y: {
...,
border:{
display:false
},
},
},
}
const options: ChartOptions<"bar"> = {
indexAxis: "y", // Updated type
scales: {
x: {
beginAtZero: true,
max: 20,
ticks: {
stepSize: 5,
},
grid: {
display: false, // Remove grid lines
},
border: {
display: false, // Remove axis border
},
},
y: {
beginAtZero: true,
position: "left",
ticks: {
callback: function (value, index) {
const labels = ["Engineering", "IT", "Marketing", "Security"];
return labels[index];
},
},
grid: {
display: false, // Remove grid lines
},
border: {
display: false, // Remove axis border
},
},
y1: {
beginAtZero: true,
position: "right",
ticks: {
callback: function (value, index) {
const numbers = [3, 5, 4, 5];
return numbers[index];
},
},
grid: {
drawOnChartArea: false, // This will remove the grid lines for the second y-axis
display: false, // Remove grid lines
},
border: {
display: false, // Remove axis border
},
},
},