score:3
Accepted answer
Yes in the ticks.fontSize configuration you can do it only for the x-axis. For example
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontSize: 8
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- Chart Js reduce text size for label on X axis
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- Chart Js change text label orientation on Ox axis
- show label in tooltip but not in x axis for chartjs line chart
- Can I specify a different font size for each row of text in Chart Title?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart is too big. How can I reduce size for the chart in vue js?
- Set fixed label size for grouped bar chart in angular Chartjs
- 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
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart JS - set start of week for x axis time series
- Chart JS show multiple data points for the same label
- Chart js different background for y axis
- PrimeNg bar chart how to show a label for the y-axis
- chart js - Apply different color for each x-axes label
- X-axis multiple colored label for bar chart using chart.js
- Chart.js Radar chart legend label font size doesn't work
- Adding custom text to Bar Chart label values using Chart.js
- ChartJS V3 Radar chart Label Font Size
- Add a text as tooltip for each point on a line chart
- How to add label in chart.js for polar chart area
- chartjs custom y axis values, different text for each one
- Chartjs - Donut Chart label for small values not visible
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- how to label axis within radar chart with chart.js
- display vertical axis label in line chart using chart.js
- chart.js change size of label of radar chart
- How to stop axis label from being cut off in chart JS?
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Chart.js - changing tick / label positions for x axis time series
More Query from same tag
- Why does Chart.js render funky?
- Remove Decimal values in Yaxis Linechart -Primefaces
- Lift the bar up from the bottom in bar type chart
- Gradient line chart with ChartJS
- How to get dataset from MySQL using Flask?
- ChartJS, nested flexbox, not shrinking
- How to vary the thickness of doughnut chart, using ChartJs.?
- Chart.js — drawing an arbitrary vertical line
- Chart.js: How to set the height of the rows manually
- Chart.js data/label scale
- How to display multiple y axis titles on seperate lines and rotated 90 degrees clockwise in chart.js
- Chart.js color is not getting changed
- Chart in Ionic Framework doesn't show up
- Chart.js stepSize not working with min
- Chartjs barchart generate data for an array dataset
- Linear gradient width using percentage (%) instead of pixels (px)
- angular chart js type line setting chart-options not working
- Border behind grid line
- Different color for line segments in ChartJS
- Add a custom label to the top or bottom of a stacked bar chart
- How to group and count missing values using linq
- UndescoreJS - Convert Object Properties Into Arrays
- ChartJS: Position labels at end of doughnut segment
- Chart.js not showing value on top of bars
- angular-chartJs change chart background and highlight colors
- Correlating separate elements with different heights to line up along vertical center line
- Angular ChartJs colors option not working
- How to run Chart.js samples using source code
- Dynamic id with canvas on html and angular
- Angularjs line chart get data from sql