score:0
you should use context.parsed.x
instead of context.parsed.y
since it's a horizontal bar chart.
please take a look at your amended code and see how it works.
new chart('barchart', {
type: 'bar',
data: {
labels: ["fruits"],
datasets: [{
label: "apple",
data: [12],
backgroundcolor: 'blue',
barthickness: 80,
},
{
label: "banana",
data: [15],
backgroundcolor: 'red',
barthickness: 80,
},
]
},
options: {
maintainaspectratio: false,
indexaxis: 'y',
responsive: true,
scales: {
x: {
stacked: true,
display: false,
},
y: {
stacked: true,
display: false,
mirror: true,
}
},
plugins: {
tooltip: {
callbacks: {
label: ctx => ctx.dataset.label + ': ' + new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(ctx.parsed.x)
}
},
legend: {
display: false
},
title: {
display: false,
},
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
<canvas id="barchart" height="100"></canvas>
Source: stackoverflow.com
Related Query
- Chart JS Tooltip Currency Problem - Stacked Bar Chart
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- ChartJS add custom tooltip to a stacked bar chart
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- Chartjs v2.0: stacked bar chart
- Horizontal stacked bar chart with chart.js
- Vertical stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Click event on stacked bar chart - ChartJs
- ChartJS add tooltip to a grouped bar chart
- How to create stacked bar chart using react-chartjs-2?
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to display inline values in a stacked bar chart with Chart.js?
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Stacked horizontal bar chart along total count with chart.js
- chart.js: Place tooltip for stacked bar charts on top of bar
- Stacked bar chart results in misaligned bars
- Multiple stacked bar chart using ChartJs
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- Add a custom label to the top or bottom of a stacked bar chart
- Stacked bar chart starting from 0 - ChartJS React
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Stacked bar chart with rounded corner of bar using Chart.js
- Chart.js stacked bar chart - sorting values in bar by value
- Chartjs stacked bar separate tooltip for all stacked
- Stacked Mixed Horizontal Bar Chart in Charts.Js Axes Positioning
- angular-chart.js : how to show numbers in each bar of stacked bar chart
More Query from same tag
- Chart.js zoom start at zoomed in
- Show only nth tick LINE on x-axis for Chart.js diagram
- Chartjs equidistance between X values
- Can I interpret Django object values as JSON data within the JS script in my HTML?
- Chartjs 3.x Migration Guide notes on animation not working
- How to change color of column in chart js
- PieChart disappears on mouseout
- How to change line chart data label to icon or image in chart.js
- how to draw line graph with line animation from left to right using chartjs?
- Hide all scale labels in chartjs
- Data not fully displaying on bar chart
- Using public data for dynamic data
- How to disable event during a state change
- Could not find elementById on mat-card-content
- chart js how do I only show just the low/high dots on line chart?
- Annotations are not displayed in Chart.js
- Rendering Chart.js Bubble Chart Using Array Data
- Line chart disable interpolation
- calling a function for fontSize in Doughnut Chart (typescript)
- How to update the chart dynamically with vue-chartjs?
- chart js -data on chart in rotated form
- How can I scale my dataset values as a percentage of the index in chart.js?
- How to add label square to Bar Chart using Chart.js
- Chart.js How to actualize canvas due to new x-axis range typed by user
- Displaying JSON data in Chartjs
- How to get the length (height) of the vertical bar in Chart.js
- charts.js chart size it's diferente than container setted size
- How to display half hour ticks on x-axes
- How to remove legend at the bottom of chartjs doughnuts
- Chart JS - X-Axis base on timezone