score:2
Accepted answer
basically, you need to subtract the second value from the first one before the chart initializes, so that, it doesn't draw the graph with combined values.
to accomplish so, you can use the following chart plugin ...
plugins: [{
beforeinit: function(c) {
var data1 = c.data.datasets[0].data;
var data2 = c.data.datasets[1].data;
c.data.datasets[0].data = data1.map(function(e, i) {
return e - data2[i];
});
}
}]
add this plugin followed by your chart options.
update
use the following tooltips callback function to show the old values on tooltip's label ...
tooltips: {
callbacks: {
label: function(t, d) {
var dst1_label = d.datasets[t.datasetindex].label + ': ' + (+t.ylabel + d.datasets[1].data[t.index]);
var dst2_label = d.datasets[t.datasetindex].label + ': ' + t.ylabel;
if (t.datasetindex === 0) return dst1_label;
else return dst2_label;
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: 'sales',
data: [500, 300],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)'
],
borderwidth: 2
}, {
label: 'earning',
data: [100, 30],
backgroundcolor: [
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 2
}]
},
options: {
scales: {
yaxes: [{
stacked: true,
ticks: {
beginatzero: true
}
}],
xaxes: [{
stacked: true,
ticks: {
beginatzero: true
}
}]
},
tooltips: {
callbacks: {
label: function(t, d) {
var dst1_label = d.datasets[t.datasetindex].label + ': ' + (+t.ylabel + d.datasets[1].data[t.index]);
var dst2_label = d.datasets[t.datasetindex].label + ': ' + t.ylabel;
if (t.datasetindex === 0) return dst1_label;
else return dst2_label;
}
}
}
},
plugins: [{
beforeinit: function(c) {
var data1 = c.data.datasets[0].data;
var data2 = c.data.datasets[1].data;
c.data.datasets[0].data = data1.map(function(e, i) {
return e - data2[i];
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- Chartjs stacked bar single max value
- Chartjs bar min, max and avarage value
- Chartjs Stacked bar have a stack id per x value
- ChartJS Stacked Bar Chart: Showing value in opposite directions
- Chartjs v2.0: stacked bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Show bar with zero value in ChartJs v2
- Click event on stacked bar chart - ChartJs
- Multiple stacked bar chart using ChartJs
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- How to remove bars for those bars with zero value in Chartjs bar chart?
- Stacked bar chart starting from 0 - ChartJS React
- How to make chartJs stacked bar always rounded when data is 0?
- Show ChartJS Stacked bar on another bar for Target vs Sales analysis
- Chart.js stacked bar chart - sorting values in bar by value
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs - Set start and end value into a Bar Chart
- Chartjs stacked bar separate tooltip for all stacked
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- Stacked Floating Horizontal Bar using ChartJS
- How to set the chartjs bar graph scale to the highest value in the result data
- How to highlight single bar in bar chart using Chartjs
- Create stacked bar chart with a single dataset per stack
- ChartJs Stacked Bar Chart
- Chart.js stacked bar ordering depending on value
- Stacked bar chart with chartjs with included values
- Chartjs Stacked bar chart not displaying correctly
- Set max value of chart.js bar chart
- Stacked Bar chart fixed width bar chart issue - Chartjs
- Chartjs 2 - Stacked bar with marker on top
More Query from same tag
- Django 1.11 - child template not inheriting from parent
- Chartjs: How to programatically remove (unhighlight or make inactive) all the active points on chart
- Django integration with Charts.js, I'm unable to find the syntax for passing the data to the template
- Format X label on mouse hover in chart.js
- Chart.js doesn't animate on first load
- how to add tool tip in yii-chartjs extension
- How to filter chart.js by month
- chart.js labels text font size and digits text font size too small
- Using ChartJS and JSON to render charts; Appending JSON Data to javascript yields an empty object in console.log
- Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis
- Get the data from node.js for Chart.js
- Mixed bubble chart with line chart in vue-chartjs4
- How to show data from views on chartjs in django?
- Highlight a particular point in chart JS
- How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS
- Cannot call a function in Javascript - Chart.js
- ChartJs showing wrong labels of data (x-axis dates)
- Retrieve value returned from a function in Angular
- Chart.js, PHP and JSON loop issue
- ChartJs - Double tooltip Top and Bottom on hover
- Highlight date in Chart.js line graph
- Annotation problem with ng2-charts in Angular 11
- react-chartjs: difference between `scales.x`/`xAxes`/`xAxes[]`
- Data updating but chart isn't
- Chart.js not showing value on top of bars
- Unable to update state in ReactJS
- Chart.js wont display normal chart
- Problem with saving data in array o Angular and Typescript
- ChartJS add custom tooltip to a stacked bar chart
- chartjs : how to set custom scale in bar chart