score:3
Accepted answer
It's not a native option in Chart.js but you can implement it yourself via plugin. See the annotations in the below code.
new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [{
label: 'series 1',
data: [0, 2, 4, 3, 1, 0]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
display: false, // must be false since we're going to draw our own 'gridlines'!
color: 'rgba(255, 0, 0, .2)', // can still set the colour.
lineWidth: 5 // can still set the width.
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
},
plugins: [{ // this is the magical bit :)
afterRender: function(c, options) {
let meta = c.getDatasetMeta(0),
max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e) {
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x, meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x, e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js How to set line height only to the points?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to set the number of of rows in a line chart in chart.js?
- how to set the color of all points in a line graph to the same in chart.js?
- chart js how do I only show just the low/high dots on line chart?
- How to configure chart.js line chart with very low minimum height, and only 0 and 1 (no decimals) as ticks on the y-axis
- Chart.js - How to set a line chart dataset as disabled on load
- How to display value of only one datapoint in line chart
- How to align Chart.JS line chart labels to the center
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- how to set chart.js grid color for line chart
- How to show only the data points that have a change in Chartjs?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to dynamically set ChartJs line chart width based on dataset size?
- How to get the actual chart width and height in chart.js
- Chart.js Tooltip over the line not only over points
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- How to use set the color for each bar in a bar chart using chartjs?
- Chart.js -> line chart -> multiple points with the same X
- How to change the chart line or area colors according to the user need?
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How do you make a progressive line chart with time as the X axis?
- How to set the gap between data items in a chartjs chart
- How do you set x and y axis and Title for a line chart using charts.js?
- How do you set up a chart.js scatter line chart through angular-chart.js?
More Query from same tag
- PrimeNG chart js is not rendering
- Update charts in chartjs and angular
- Programmatically open and close Chart.js tooltip
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- Make Chart.js Radar labels clickable
- Php/ajax return JSON in same form as javascript array
- Django Chartjs outputs "No data" when data has value 0
- why isnt vue-chartjs receiving data from api?
- ChartJS tooltip issue
- Is there any way to use 2 different color for the same bar in a chart?
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Chartjs: How to programatically remove (unhighlight or make inactive) all the active points on chart
- hereChartJS Line Chart with Time Axis
- Canvas is not defined for simple chart
- Chart.js not showing data until I click on the label 3 times
- How to display data by current month and display no data message if data not exists
- Javascript array not initialized
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Multiple chart on one page using chart.js and Flask app
- Adding a chart-js plugin to vue-chart-js
- The title of my ChartJs on the chart is undefined, but I can't change it because my labels use a function: Object.keys(groupMedia)
- How to display k as thousand for the values of chart.js - Javascript
- I'm unsure of how to get vue js and charts js to work together. correctly
- Chart.js: Is it possible to get the label of a dataset in a stacked bargraph on clicking it?
- Chart.js line chart looking as area chart with smooth lines but not sharp
- Vertical align bar chart from chart.js not working
- Reverse tick order
- Using Chart.js in Web Worker
- build a javascript callback function from php for chartjs
- Remove radar chart labels in chart.js