score:0
Use Rotation in scales > x > ticks
scales: {
x: {
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}
}
let chart = new Chart('myChart', {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
x: {
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
score:0
Here is my options config
const options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
enabled: true
},
},
scales: {
xAxis: {
ticks: {
maxTicksLimit: 7,
minRotation: 0,
maxRotation: 0
}
}
}
};
score:1
try fix the function calculateXLabelRotation in chart.js
calculateXLabelRotation : function(){
...
//↓↓↓
this.xLabelRotation = 0;
//↑↑↑
if (this.xLabelRotation > 0){
this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;
}
...
},
score:44
If you are using chart.js 2.x, just set maxRotation: 0 and minRotation: 0 in ticks options. If you want them vertical, set maxRotation: 90 and minRotation: 90 instead. And if you want to all x-labels, you may want to set autoSkip: false. The following is an example.
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0
}
}]
}
}
});
Source: stackoverflow.com
Related Query
- Make x label horizontal in ChartJS
- Make y-axis sticky when having horizontal scroll on chartJS and Angular
- How to make multiple horizontal bar chartjs
- ChartJS horizontal label are 1-2px clipped
- make chartJS labels clickable and get label details
- How do I draw horizontal bars with a label using either ChartJS or D3?
- How to remove square label from tooltip and make its information in one line?
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- ChartJS - Draw chart with label by month, data by day
- How to make integer scale in Chartjs
- show label in tooltip but not in x axis for chartjs line chart
- Chartjs v2 xAxes label overlap with scaleLabel
- How to add label for ChartJs Legend
- Make Chart.js horizontal bar labels multi-line
- how to always show label in chartjs without mouseover?
- Chartjs change the specific label color in x axis in callback function
- Chartjs doesn't update dataset label on tooltips
- Horizontal bar with multiple sections in ChartJs
- Chartjs display label & units when mouse is hover stats
- How to draw Horizontal line on Bar Chart Chartjs
- change long labels to multiline(wrap) label in ChartJs
- Position Label under the Horizontal Bar
- How to get onClick Event for a Label in ChartJS and React?
- Chartjs bar dataset label not showing
- How do I make line charts overlay over bar charts in chartjs
- Chartjs change horizontal axis value
- ChartJS V3 Radar chart Label Font Size
- Chartjs adding icon to tooltip and label
- How to make points in chartjs draggable?
- How to make customized stepSize for each horizontal bar in Chart.js graph
More Query from same tag
- Chart JS horizontal bar chart width of bars and the chart
- Chart.js javascript from db stopped working after adding axes
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- chart.js API returns bad x and y points
- How to Render Chart Datasets in Vue?
- Uncaught TypeError: Cannot read property 'draw' of undefined
- Chartjs labels position
- How to change the fontFamily of the labels and remove the grid in chart.js
- Angular 9: Chart.js: Monochromatic(Single color with shades) doughnut chart
- Render pie chart datasets out of 100% -- Chart.JS
- Update all Chart.js instances in order to apply changed defaults?
- Error when adding data on top of each bar
- Chart.js showing old chart on hover
- django 'LineChart' object has no attribute 'get'
- Chart.js Radar chart legend label font size doesn't work
- Plotting Dashed Vertical and Horizontal lines on line graph for single point
- Position tooltip in center of bar
- Adding additional data to chart
- How to remove some points in chartjs
- Creating Chart.js using API data in react
- Binding Chart to Canvas height width
- Data Labels are getting cut off on the top
- How to hide other section of chartjs on click of lengend
- How to set the chartjs bar graph scale to the highest value in the result data
- jQuery convert hex to rgba
- Chart.js mouseover tooltips appears when cursor in wrong position
- Problems trying to render some data on chartjs
- Pagination in Bar chart using ChartJS
- Chart.js: changing tooltip template