score:11
Accepted answer
You can use the following callback function for y-axis ticks to achieve that :
callback: function(value, index, values) {
if (index === values.length - 1) return Math.min.apply(this, dataArr);
else if (index === 0) return Math.max.apply(this, dataArr);
else return '';
}
note: you must use a separate array for data values (here it's dataArr
), instead of an in-line one.
EDIT :
add the following in your y-axis ticks config to make the data-points perfectly aligned with the ticks :
min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr)
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var dataArr = [154.23, 203.21, 429.01, 637.41];
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: 'LINE',
data: dataArr,
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
tension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr),
callback: function(value, index, values) {
if (index === values.length - 1) return Math.min.apply(this, dataArr);
else if (index === 0) return Math.max.apply(this, dataArr);
else return '';
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Source: stackoverflow.com
Related Query
- Chartjs: how to show only max and min values on y-axis
- Chartjs v2.5 - only show min and max on scale, absolute positioning on scale
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- chart.js how to force min and max y axis values
- How to set only min and max values in y-axis (chart js)
- How to set max and min value for Y axis
- ChartJS: How to set fixed Y axis max and min
- Hide min and max values from y Axis in Chart.js
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- Chartjs gradient background color based on min and max values
- How to show data values or index labels in ChartJs (Latest Version)
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100%
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How do I force Chart.js axes min and max with react-chartjs-2?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Using chartjs v2 to show categorical values on axis instead of numeric
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Setting up min and max in chartjs did not work
- How to set max smaller than min in ChartJS
- ChartJS automatically scaled chart has undefined min and max
- Bar chart with min height and zero values - ChartJs
- How can I show chartjs datalabels only last bar?
- Setting min and max values chart.js
- How to show the chartjs bar chart data values labels as text?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How remove duplicates xAxis labels and show all values on chart
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
More Query from same tag
- ChartJS : It's not showing in html on Django
- How to add label in chart.js for polar chart area
- Cannot import chart.js-plugins-annotations
- How to filter hover on a chart in ChartJS?
- Django Time Series with Chart JS
- AngularJs ChartJs tooltip z-index issue
- How to clear a chart from a canvas so that hover events cannot be triggered?
- ChartJS Email HTTP Request API
- ChartJS do not render any legend if the label is falsy
- How can I add functionality to Chartjs Doughnut chart custom legend
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- ChartJS 2 - Adding data to chart breaks after X number of items added
- ChartJs is not working in angular 4 with no errors
- Angular ChartJs does not show Data for multiple Charts
- ChartJS doughnut chart not displaying colours
- chart.JS i want to put different color for each Y axis value grid line color
- Custom labeling/fixed range on x-axis in Chart.js for horizontal bar chart?
- Vuejs prop does not get updated
- ChartJS time axis not plotting correctly | getting an hour instead of date
- How to bind touchmove in chartjs canvas?
- Storybook: Changing the value of the control doesnot rerender the Chart.js canvas
- Background color of the graph affects the other graphs too
- Cannot change anything in chart options
- Using Chart.js with Pyramid Web Framework
- Canvas Emptied but Reappears
- Define backgroundColor from data in chartJS
- How to fix page layout with embedded frame
- Fetching change-in stats from World Bank javascript JSON downloads using Chart.js
- Use transparent stroke color with chartjs pie chart
- Chart.js Treemap Adding custom text to each rectangle