score:1
Accepted answer
you can use the tooltipmode point for this.
example:
var options = {
type: 'horizontalbar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: 'red'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
backgroundcolor: 'blue'
}
]
},
options: {
tooltips: {
mode: 'point'
},
scales: {
yaxes: [{
stacked: true
}],
xaxes: [{
stacked: true
}]
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Stacked horizontal chart. How to trigger individual hover in the stacked element?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- How to fix a stacked logarithmic bar chart values to fit the grid
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- Drawing a horizontal line on a stacked bar chart on hover (chart js)
- How to set the pointDot option on combo stacked bar-line chart
- How to set the pointDot option on combo stacked bar-line chart
- How to decrease the interval for Horizontal Stacked bar in ChartNew.js?
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Horizontal stacked bar chart with chart.js
- How do you hide the title of a chart tooltip?
- How to add text in centre of the doughnut chart using Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- chart js tooltip how to control the data that show
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to trigger hover programmatically in chartjs
- How to display inline values in a stacked bar chart with Chart.js?
- Chart js. How to align text by the center of the tooltip?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Draw a horizontal and vertical line on mouse hover in chart js
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar 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
More Query from same tag
- Chart.js legend customisation
- How to export a chart in Excel and PDF format using Chart.js
- Line Chart Js x-axis values all 0 on React
- chart.js 2.0 current mouse coordinates tooltip
- ng2-charts and annotation plugin: annotations not visible after data update
- Two charts using same options, but I need different titles for the charts
- Chartjs is not rendering
- How to disable chartjs legendclick
- How can I sort data from highest to lowest in chart.js
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- rotated partial doughnut chart with a point marker in chart.js agularJS
- Chart.js - combine data and label into a single object
- Why is chart.js not working with angular JS
- Not sure how to rerender chart in the app
- Charts.js - Bar chart different colors for value intervals not working
- (Typescript) How do you set pointRadius, pointHoverRadius, ect in ChartJs 3.7.0 & react-chart-js-2 4.0.1
- (chart.js v3.5.1) change bar background, label font color on click
- Configuring locale with bundled (CDN) chartjs-adapter-date-fns.bundle.min.js?
- Angular 12 Chart.js - Cannot display doughnut
- Problem in passing values using props in react.js while using chart.js
- Single Stacked bar with three sections in Angular
- Adding condition in ComponentDidMount to display chart data
- Legend position is not vertically in middle in Donut chart
- angular 5 chart.js Failed to create chart
- Edit legend labels [vue-chart.js]
- Multiple Range Highlighting of Background in Chart.js
- How to change fonts and axis labels for Chart.js image rendering with QuickChart?
- How to connect Firebase in Chart.js?
- Properly scaling xAxis with time in chart.js
- Chart.js how to create chart wirhout y-axis for two data sets