score:4
Accepted answer
You are looking for the suggestedMax
tick option for the y-axis. Use it like this:
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: 60
}
}]
}
}
This tick value will be used as the maximum tick of the y-axis, provided that all data values are lower than this. If a data value is higher than this tick value, then a higher tick value will be automatically calculated and used instead. From the docs:
suggestedMax
User defined maximum number for the scale, overrides maximum value except for if it is lower than the maximum value.
You may see it in action here and below.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Percentage',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: 60
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- How to set lower limit for the highest value being displayed on Y Axis?
- How to set max and min value for Y axis
- How to set the chartjs bar graph scale to the highest value in the result data
- How to set y axis to the max dataset value in Chartjs?
- ng2-charts: How to set fixed range for y axis
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to show Y axis ticks for every point in the graph
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How do I fix over limit y axis value in ChartJS
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Chart.js: Can't get a coordinate for value for x axis unless x axis has the exact same value
- chartjs - how to set the order in which the different charts are displayed
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How can I set the yAxis scale for the chart?
- How to use set the color for each bar in a bar chart using chartjs?
- How to set dynamic value for horizontal line in annotation plugin for Chart.js
- How to show tooltip value of all data falling on the same axis in chart js?
- How to give link for lable/Legend in chart.js? and if the value is 0 how to remove the legend?
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- How to add the value for each label to pie legend
- How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How to set minimal value for bar chart in Chart.js? (ver. 2.0.2)
- How to set min Value a step down of min value received from database in Y Axis in ChartJS
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- chart.js how to configure the lable for both axis
- Chart.js Version 3: how to set the different color for tick lines and gridlines
More Query from same tag
- Increase space between largest bar and top grid line in charts.js
- How to resize chartjs in bootstrap columns for different browsers
- How to split a List into View in C#
- Draw a single frame in Chart.js
- How can I make streaming chart with react?
- How to apply to different bground color for each area in Chart.js
- Change Angular js charts.js chart type dynamically
- Bar Chart in Angular JS Using Chartjs
- Place tooltip on the outer side of the doughnut chart
- how to label the x and y axis - in a line graph
- Chart.js formatting data values
- chartjs doesn't render dates properly
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- Chart.js load new data
- How to create range based ticks in chart js? (like in attached image)
- Timeline on Y axis, with chart.js
- chart.js modify style from dataset label
- How to pass data in Laravel with Chart.js
- React using fetch returns undefined until save
- line graph spot in the top middle of the bar graph
- Is it possible to produce circular (round) shaped radar chart in Chart.js?
- How to hide Chart.js data labels for small screens
- Chart.js different time datasets
- Chart.js Radar Labels Coordinates
- Select missing dates from a table in MySQL
- how to reset the graph/chart after zoomin, pan using chartjs
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to set only min and max values in y-axis (chart js)
- Chart.JS custom legend onClick event returns error when calling original event handler
- Chart.js render problem when routing Angular