score:0
solution to the question
you can accomplish this by changing the tooltip mode
to x
instead of index
, please refer to this documentation.
options: {
tooltips: {
mode: 'x'
}
}
fixing the total value as asked
here is a solution implemented by me based on the code presented on the question and probably from this thread where we can find a basic explanation who this work.
fist, create an dataset array that belong to the same stack
as the hovered tooltip, to do so:
var datastack = data.datasets.filter(
x => x.stack == data.datasets[tooltipitem.datasetindex].stack
);
then, we can check if the callback
is for the last dataset of this list (so the total is added only at the end)
if (data.datasets[tooltipitem.datasetindex] != datastack[datastack.length - 1])
also, i changed the location where the total is calculated since we only need to calculate it when the last callback
is called.
here is a full working example:
var ctx = document.getelementbyid('bar-chart').getcontext('2d');
var chart = new chart(ctx, {
type: 'bar',
data: {
labels: [' mai', ' juin', ' juillet', ' aout', ' septembre', ' octobre', ' novembre', ' decembre', ' janvier', ' fevrier', ' mars', ' avril', ],
datasets: [{
label: "l'année derniere male",
backgroundcolor: 'rgb(5, 90, 130)',
bordercolor: 'rgb(254, 90, 130)',
data: [5, 2, 0, 4, 2, 4, 5, 0, 7, 3, 0, 8],
stack: 1
},
{
label: "l'année derniere femelle",
backgroundcolor: 'rgb(120, 99, 132)',
bordercolor: 'rgb(254, 90, 130)',
data: [7, 0, 3, 0, 9, 0, 1, 0, 8, 0, 10, 2],
stack: 1
},
{
label: 'male cette annee',
backgroundcolor: 'rgb(255, 99, 132)',
bordercolor: 'rgb(255, 99, 132)',
data: [0, 2, 0, 4, 2, 0, 5, 0, 7, 0, 0, 1],
stack: 2
},
{
label: 'femelle cette annee',
backgroundcolor: 'rgb(100, 99, 132)',
bordercolor: 'rgb(255, 99, 132)',
data: [0, 12, 0, 1, 5, 0, 6, 0, 7, 0, 8, 15],
stack: 2
}
]
},
options: {
tooltips: {
mode: 'x',
callbacks: {
label: function(tooltipitem, data) {
var corporation = data.datasets[tooltipitem.datasetindex].label;
var valor = data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
var datastack = data.datasets.filter(x => x.stack == data.datasets[tooltipitem.datasetindex].stack);
if (data.datasets[tooltipitem.datasetindex] != datastack[datastack.length - 1]) {
return corporation + " : " + valor.tofixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
var total = 0;
for (var i = 0; i < datastack.length; i++)
total += datastack[i].data[tooltipitem.index];
return [corporation + " : " + valor.tofixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "total : " + total];
}
},
}
},
scales: {
xaxes: [{
stacked: true,
ticks: {
beginatzero: true,
suggestedmax: 50
}
}],
yaxes: [{
stacked: true
}]
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<canvas id="bar-chart" width="400" height="300"></canvas>
Source: stackoverflow.com
Related Query
- How to put 2 labels and distinct tooltips from two bars
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Chart.js, how to reduce space between labels and bars (horizontal bar chart)
- How can I remove two labels from my legend with an alternative to item.datasetIndex !== 1 && item.datasetIndex !== 4; ? (Charts.js)
- How to remove square label from tooltip and make its information in one line?
- How do I prevent the scale labels from being cut off in chartjs?
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart.js Bar Chart - how to chart bars from 0
- How to fix bars in Chart.js with long labels
- How to remove gridlines and grid labels in Chartjs Radar?
- How to display value labels above graph bars using chart.js
- How put dataset labels into multiTooltipTemplate?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How to remove background color and color example from tooltip in Chart.js?
- Hide all labels and tooltips in Chart.js and make it very small size
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- 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 do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to retain spacing between bars for two different bar charts in Chart.js 2
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Adding labels and colours to Chart.JS from arrays
- How to show scale labels and set min/max for yAxes?
- How to hide grid lines and x-axis labels in chart.js?
- How to change the fontFamily of the labels and remove the grid in chart.js
- How to use same data / labels on two y axes in Chart.js
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- how to put a y-axis and x-axis label while using html and chartjs
- how can i reset chartjs object all instances and recreate it from scratch?
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
More Query from same tag
- Is it possible to keep the same width of the drawing surface when updaing chart.js linechart
- Chart.js - changing tick / label positions for x axis time series
- How to inject "Chart.js" in my module?
- Dynamic array javascript
- How to align legend in angular-chart.js
- Time format on the x axis in Chart.js
- ngx-charts-advanced-pie-chart is reading my rest api response as null
- Iterating through the same dataset in Chart.js
- How to limit xAxis label in Chart.Js 1.0.2?
- Draw a horizontal and vertical line on mouse hover in chart js
- How to change x-Axes label position in Chart.js
- Accordion won't take up height of chart for first click
- Is it possible to add individual labels to Chart.JS bars?
- Error ReferenceError: CanvasGradient is not defined
- Custom scatter chart extended from scatter chart becomes line chart
- How do I implement the 'autoskip' feature in chartjs?
- Error: $injector:modulerr Module Error - chart.js
- Chartjs not rendering chart and no error thrown
- chartJs: I want to show both of the dataset legends when i hover to one of the points?
- How do I customize y-axis labels on a Chart.js line chart?
- how to add FAHRENHEIT symbol in chart js donut chart
- How to know which stack is clicked, in a grouped stacked bar (chartjs)?
- How to import a doughnut Chart using Chart JS for Blazor?
- On hover bar is overlapped by label chartjs
- Display Chartjs tooltip values outside the canvas - multi line chart
- Remove custom Chart Js tool tip colour square
- Make Chart.js canvas responsive inside the resizeable div
- Using public data for dynamic data
- How to change chart background colour when exporting to PDF with chart.js
- dynamic line styling in chartjs