score:1
Accepted answer
the best way to do this (and obviously more work) would be to create a custom axes. chart.js explains how to do this here:
https://www.chartjs.org/docs/latest/developers/axes.html
i've also create a fiddle where the datavalues are modified by a set baseline. i've modified the tooltip and y-axis label as well so that everything shows based on the baseline. it's not as elegant as a custom axis, but it's quick and gets the job done (assuming the baseline is known). you can check out the fiddle here:
https://jsfiddle.net/tkngc02h/1/
and, in case you just want to see the code, here it is:
<!doctype html>
<html>
<head>
<title>line styles</title>
<script src="https://www.chartjs.org/dist/2.9.3/chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var baseline = 1;
var config = {
type: 'bar',
data: {
labels: ['january', 'february', 'march', 'april', 'may', 'june', 'july'],
datasets: [{
label: 'testdata',
fill: false,
backgroundcolor: window.chartcolors.blue,
bordercolor: window.chartcolors.blue,
data: [
0 - baseline,
1.8 - baseline,
2.1 - baseline,
-0.2 - baseline,
1.3 - baseline,
-0.5 - baseline,
-0.23 - baseline,
0 - baseline
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'chart.js line chart',
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// use the footer callback to display the sum of the items showing in the tooltip
label: function(tooltipitem, data) {
var label = data.datasets[tooltipitem.datasetindex].label || '';
if (label) {
label += ': ';
}
label += tooltipitem.ylabel + baseline;
return label;
},
},
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'month'
}
}],
yaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'value',
},
ticks: {
// include a dollar sign in the ticks
callback: function(value, index, values) {
return value + baseline;
}
}
}]
}
}
};
window.onload = function() {
var ctx = document.getelementbyid('canvas').getcontext('2d');
window.myline = new chart(ctx, config);
};
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- ChartJS – Set baseline above zero
- How to set ChartJS Y axis title?
- chartjs : how to set custom scale in bar chart
- Show bar with zero value in ChartJs v2
- ChartJS - Set different hover-text than x-axis description
- ChartJS set yAxes "ticks"
- Chartjs 2.7.3: Set Y data at the correct X position axis
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to set a full length background color for each bar in chartjs bar
- ChartJS set default options only to specific Canvas, not globally
- How to dynamically set ChartJs line chart width based on dataset size?
- ChartJs - set x-axis ticks at specified/fixed intervals
- How to add ChartJS code in Html2Pdf to view image
- How to remove bars for those bars with zero value in Chartjs bar chart?
- ChartJS How to set max labels for X axis?
- In bar chartjs report zero values are skipped so bars are invalid
- Chartjs tick color different at zero
- How to set ChartJS x-axis title
- how to set color for each item in tooltip with ChartJS
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chartjs - how to set the order in which the different charts are displayed
- Chartjs - Set start and end value into a Bar Chart
- can't set ChartJS canvas width
- Chartjs not working with d3 from csv source
- How to set max smaller than min in ChartJS
- How to set a borderWidth on ChartJS - AngularJS?
- How to set the chartjs bar graph scale to the highest value in the result data
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- How can I make small grid lines above ChartJS labels?
- ChartJS and JSON result: Cannot set property 'fillColor' of undefined
More Query from same tag
- special characters in title of charts of Charts Js
- react-chartjs-2 how to set multiple background levels within a line chart
- Is there anyway add 2 or more chart with foreach loop
- Is Chartjs compatible with PhoneGap?
- Chart.js minimal width of Chart with scrollable overflow
- Chart JS : Display the percentage of labels without getContext('2d')
- Plotting Real Time data using Flask Chart.js
- Chart js legend are being cut off if the bar height is equal to port height - chart js
- How can I modify category labels font size in Chart.JS V2?
- Chartjs Data via json request not populating
- Vue Chart.js component does not render
- Chart.js: Line chart with partial dashed line
- Width and Height in Chart.js
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- Chart.js yAxes Ticks stepSize not working (fiddle)
- ChartJS datasets with one data value
- ChartJS Tooltip - Change Data Format Displayed
- How to load Json data onto a Charts.js chart
- Datetime picker in Chart.js
- Chart from chart.js to pdf
- TypeError: Chart.defaults.global.tooltips is undefined in AngularJS
- How to fetch all data from API files and assign their values to chart?
- How to remove gridlines and grid labels in Chartjs Radar?
- How to sum the array value in javascript like chartjs data array and input value sum
- Chart.js, dashed line, full width chart
- Update the Chartjs push data with ajax
- build a javascript callback function from php for chartjs
- Not being able to display value from json data into chart js
- Chart JS data labels getting cut
- Getting nice chart.js animation when adding data with unshift()?