score:3
not sure which version of chartjs you are using but if someone comes across this you can turn off the display of 1 or more axis by using display: false for example the following turns off the display of the x axis.
options: {
scales: {
xaxes: [{
display: false
}]
}
}
score:0
answer of @rich dominelli is correct for chart.js
v2.xx
here code for chart.js v3.xx to eliminate axis:
(not backwards compatible with v2.xx)
for those interested, following modified code to work with chart.js
v3.xx
option: {
scales: {
x: { // <-- object '{' now, instead of array '[{' before
display: false
},
y: { // <-- object '{' now, instead of array '[{' before
display: false
}
}
};
following full code example for line-chart without axes in snippet below that you can run:
const labels=["2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];
const ctx=document.queryselector('canvas').getcontext('2d');
const data = {
labels: labels,
datasets: [{
label: 'data 1',
bordercolor: 'grey',
data: data_1
}, {
label: 'data 2',
bordercolor: 'grey',
data: data_2
}]
};
const option = {
scales: {
x: {
display: false
},
y: {
display: false
}
}
};
const chart = new chart(ctx, {
type: 'line',
data: data,
options: option
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of chart.js, now at v3.5.0 -->
<canvas width="640" height="480"></canvas>
score:2
here's a rough solution:
i found this around line 1600 of chart.js:
// this is x axis, so draw it
if (index === 0 && !drawhorizontalline){
drawhorizontalline = true;
}
i modified it to always be false when index === 0
, which i assume means that we're on an axis:
// this is x axis, so <don't> draw it
if (index === 0 && drawhorizontalline){
drawhorizontalline = false;
}
i did something very similar for the y-axis further down, and then i commented out the code that draws the tiny 5-pixel dashes along each axis as well. if someone knows of a configuration option for this, please share.
also, i guess i could have just set the line stroke / fill color to the same as the background color...
Source: stackoverflow.com
Related Query
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Remove excess lines on y axis using chartjs
- Remove y and x axis lines and change axis font style in Chartjs
- ChartJS Line Charts - remove color underneath lines
- How to set ChartJS Y axis title?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS – is there any way to remove blank space around pie charts?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to remove the line/rule of an axis in Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- how to change background in chartjs and remove background lines?
- Chartjs change the specific label color in x axis in callback function
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- How to remove gridlines and grid labels in Chartjs Radar?
- Chartjs 2.7.3: Set Y data at the correct X position axis
- 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 change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to remove the Chart.js x Axis bottom line?
- Changing the Y axis unit in Chartjs
- ChartJS - remove axis?
- Chartjs real time graph x axis movement
- Chartjs x axis scaling
- Chartjs change horizontal axis value
- ChartJS / MomentJS - Unable to remove deprecation warning. Graph not showing in firefox/opera
- Chart.js remove border from x/y Axis
- How to add ChartJS code in Html2Pdf to view image
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Remove gap when updating ChartJS
More Query from same tag
- Chart.js Time series - x axis that change depending on timestamp
- Alter values of xAxis in chartjs
- How to Integrating Chart.js with Angular 7 with Data from database
- Chartjs! Date order value high to low
- Pausing Javascript animation on minimize
- On click event to show name of pie chart slice in chartsJS
- Chart js options not changing chart
- How to show xaxis lable o only data point and hide all others?
- Chart.js, set a max value
- generator-angular-fullstack and angular-chart.js not displaying charts
- How to update chart.js on websocket event?
- How to get data from JSON ReactJs
- How to change the fontFamily of the labels and remove the grid in chart.js
- Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension
- Displaying mixed types of legends (bar and lines) with Chartjs
- Code doesn't work after updating chart.js versioning
- chart.js 2.0 add new property to dataset
- How to change cursor style to pointer on hovering over points of the chart?
- Thicker X-Axis with Charts.js
- Chartjs - Changing legend as a line with pointsyle of circle?
- opening json file to create chart in chart.js
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Pass objects from javascript to Chart.JS through EJS
- Chart.js not showing value on top of bars
- Stack grouped xAxes in bar chart
- Align a data label below a point on a bubble graph (Chart.JS)
- Add Modal Popup for each chart.js data value
- Can we remove bar chart line on click on pie chart legend label?
- ChartJS how to generate custom legend?
- chart.js tooltip keeps remembering old data after update