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
- How to set the pointDot option on combo stacked bar-line chart
- Why tooltip position absolute does not apply using js?
- How to have more controls over the borderColor per arc segment for chart.js pie charts
- Get last 6 month name in Array for Chartjs
- Programmatically open and close Chart.js tooltip
- Charts.js - Bubble chart with two word axis
- Chartjs animate x-axis displaying data incorrectly in mac device
- How update reload chart.js
- Javascript array not initialized
- i can't create a line vertically with react annotation
- How to change the z order of a chartjs polar chart
- Chart JS grouped sub labels
- Trying to have Doughnut chart with dql result chartjs
- ChartJS and require: Chart is undefined
- Set xAxes labels to format YYYY-MM-DD HH:mm:ss in Chart.js
- How to stop chartjs zoom more than visible points?
- php to json to chart.js
- trying to get minIndex and maxIndex from x-axis-0
- How to customize chart js Bar chart shape?
- How to update css for doughnut chart with ng2-charts
- Can't increase font size in google bar chart
- Remove/Hide (display:none) the graphical chart in small-mobile view - JS chart
- How do I get a different label for each bar in a bar chart in ChartJS?
- ChartJS Tooltip Customization
- Can I set different fill color based on a given threshold in Chart.js?
- How to adding data in loop and display chart dynamically like in live (chart.js & typescript & angular)?
- Show chart.js animation only when user scroll on the specific DIV
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- load external json data file in to chartjs in the angular component
- Utils package in Chart.js