score:0
Accepted answer
See this example: https://jsfiddle.net/9r6nt0tu/
You could add right-padding of 10px to the chart and expand callback
function hide the last label by returning an empty string.
callback: (value,index,values) => {
// don't show last tick label
if (index+1 >= values.length) {
return '';
}
...
}
As K Scandrett recommends, label rotation could also be used if many chart values exist.
score:-1
You can eliminate that extra whitespace by forcing rotation:
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 45,
minRotation: 45
}
}]
Here is a demo with a before and after http://jsbin.com/dorapekizo/edit?html,js,output
Original idea came from https://stackoverflow.com/a/39706742/1544886
Source: stackoverflow.com
Related Query
- Angular Chart JS prevent x label causing overflow
- Hide label on slice of Doghnut/Pie Chart Angular ng2-charts
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Set fixed label size for grouped bar chart in angular Chartjs
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How get values on legend label withn Chart js on Angular
- How to change label color of ng2 chart in angular
- Angular Radar Chart :OnClick event of label or sector
- Chart Js Change Label orientation on x-Axis for Line Charts
- How to prevent first/last bars from being cut off in a chart with time scale
- ChartJS - Draw chart with label by month, data by day
- Chart Js change text label orientation on Ox axis
- chart.js scatter chart - displaying label specific to point in tooltip
- How to fix chart Legends width-height with overflow scroll in ChartJS
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js bar chart : Grid color and hide label
- Problem for display a chart with Chart.js and Angular
- Chart JS show multiple data points for the same label
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Angular 2 chart - change point radius
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Series Details Not Showing in Angular Chart with Charts.js
- Ng2-charts / chart.js - how to refresh/update chart - angular 4
- PrimeNg bar chart how to show a label for the y-axis
- chart js - Apply different color for each x-axes label
- Extending Existing Chart Types angular chart js using chart js 2.0
- X-axis multiple colored label for bar chart using chart.js
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
More Query from same tag
- Bar chart with vertical lines in each bar
- Chart.js Yaxis custom horizontal line and label
- angular chartjs not showing data properly
- how can i grab a property from an array of JSON objects to use the values of that property as a labels in my chart?
- change space between horizontal (grid) lines for line chart
- ChartJS - Highlight grouped bars
- Adding condition in ComponentDidMount to display chart data
- How to pass model object to javascript function in asp.net Core
- How to I optimise these javscript options which is used multiple times on different chart.js graphs?
- Get data from dynamic ID for Chart.js
- Extending Existing Chart Types angular chart js using chart js 2.0
- Populating a chartJS with data from API through axios (VueJS)
- Cannot find module /chartjs.helpers while using chartjs-plugins-datalabels (ReactJS)
- Chart.js returns a console error and does not display the chart when using variables as data input
- Render pie chart datasets out of 100% -- Chart.JS
- Proper way to use a counter variable in HTML/Javascript
- Adding data to line chart using addData() method in Chart.js
- ChartJS - Line chart issue with only 1 point
- ChartJS: Remove padding on first and last bars on Barchart
- chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2
- Graph Chart.js dropdown menu - chart rendering
- ChartJS: Update tooltip
- ChartJS with Symfony 4.4 (UX component)
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- Why aren't my data points getting placed in the corresponding locations in my chart?
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- How do I make my Type:Time to work with my Line Chart?
- Timeline on Y axis, with chart.js
- Control Scaling of Canvas When dragged out of chart limit
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart