score:135
This disables the vertical Y axis line:
options: {
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
},
}]
},
},
This can be combined with display
to disable the vertical gridLines:
xAxes: [{
gridLines: {
display: false,
},
}],
Here's a working example: http://codepen.io/anon/pen/xqGGaV
score:0
score:2
Put your option config like this
options: {
legend: {
display: false
},
title: {
display: true,
text: title+` (${data.reduce((a,b)=>a+b,0)})`
}
,
scales: {
yAxes: [{
display: false,
}]
}
}
score:3
I use this:
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}]
}
score:5
so if you only want to hide the grid lines only on the chart , but keep the axis line:
gridLines : {
drawOnChartArea: false
}
With above examples it will be like:
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales:
{
yAxes: [{
gridLines : {
drawOnChartArea: false
}
}]
}
}
});
score:11
var ctx = document.getElementById("myChart");
var data = {
datasets: [
{
label: 'First Dataset',
data: [
{ x: 20, y: 30, r: 10 },
{ x: 40, y: 10, r: 10 },
{ x: 30, y: 20, r: 30 }
]
}]
};
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales:
{
yAxes: [{
display: false
}]
}
}
});
score:12
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales:
{
yAxes: [{
gridLines : {
display : false
}
}]
}
}
});
score:14
From version 3 upwards, you should use this options to hide axes completely:
Picture: chartjs-without-axes
scales: {
x: {
display: false,
},
y: {
display: false,
}
},
score:15
For Chartjs version 3.3.2 this works for me
var barChart = new Chart(ctx,{
type: 'bar',
data: data,
options: {
scales:
{
y: {
grid: {
drawBorder: false, // <-- this removes y-axis line
lineWidth: 0.5,
}
}
}
}
});
Source: stackoverflow.com
Related Query
- How to hide y axis line in ChartJs?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to draw multiple line on y axis for same x axis in chartjs v2?
- How to hide some points inside my line graphic in React ChartJS 2?
- How do I hide line outside the min/max (scale area) in chartjs 2.0?
- How to set ChartJS Y axis title?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- How to render a vertical line on hover in chartjs
- How do I fix over limit y axis value in ChartJS
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- How to draw Horizontal line on Bar Chart Chartjs
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to dynamically set ChartJs line chart width based on dataset size?
- How do I make line charts overlay over bar charts in chartjs
- How to add ChartJS code in Html2Pdf to view image
- How to hide axis using Chartkick.js
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Specific grid line in X axis in ChartJs
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to cut line graph in ChartJS
- how to hide specific dataset based on condition chartjs angular
- how to highlight a specific area on chartjs line chart
- Chart.js - how to make proportional intervals on X axis on line chart
- How to reduce the number of points shown on line chartjs chart with a large dataset?
More Query from same tag
- Importing JSON to data and labels for chart.js
- Drawing chart.js with external JSON
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Unique identifier in Chartjs Bar segments?
- How to add font family to Chart.js V3.7.0
- Uncaught TypeError When Trying to get Canvas
- Update a graph from chartsjs in reactjs
- ChartJs - Footer color dynamically
- How to make bar charts and scatter dots appear underneath each other?
- Get X, Y onClick chart coordinates in ChartJS
- How do i use chartjs in react project properly?
- chart.js plugins.register function with outer data
- Chart.js - Setting x-axis based on user input
- Re-compile JSON data to make less rows
- Unregister plugin in Chart.js
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Use of ng-class with Chart.js
- Chart.js compress vertical axis on barchart
- ChartJS - Show percentage base on data on hover (AngularJS)
- how to reset the graph/chart after zoomin, pan using chartjs
- Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2
- padding not working in my chartjs line-graph
- Bar chart with vertical lines in each bar
- Plotting objects in Chart.js
- chart.js scatter chart - displaying label specific to point in tooltip
- angular-chart error on line chart: unable to parse color
- Annotation problem with ng2-charts in Angular 11
- How can I format chart.js data labels while using chart.js datalabels plugin?
- How to render multiple Chart.JS charts on the same page with AJAX data and variables
- Chartjs line chart gets all scrambled up when an x value coincides with a label