score:10
Accepted answer
references:
chartjs docs: tooltip configuration - interaction modes
mode : index - finds item at the same index. if the intersect setting is true, the first intersecting item is used to determine the index in the data. if intersect false the nearest item is used to determine the index.
update the chart options to include the tooltips configurations. set the mode
to index
tooltips : {
mode : 'index'
},
the updated options would look like this.
const chart_options = {
tooltips : {
mode : 'index'
},
scales:
{
xaxes: [{
ticks: {
display: false,
},
}],
yaxes: [
{
type: 'linear',
id: 'y-axis-0',
display: false,
position: 'left',
},
{
type: 'linear',
id: 'y-axis-1',
display: false,
position: 'right',
},
],
},
};
check updated sample which include tooltips mode set to index
Source: stackoverflow.com
Related Query
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How do I display two datasets on a single chart with chartjs
- Combine two line charts into one in ChartJS
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Draw two plots using chartjs over one another with transparency
- Chartjs extended doughnut with text tooltip issue
- Chartjs - Insert additional data into chart tooltip
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS - Custom tooltip with icon
- Chartjs with multiple y axes and different scales
- ChartJS - Adding legend title into tooltip title
- how to set color for each item in tooltip with ChartJS
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- How to combine lines with different starting points in chartjs
- Chartjs not working with d3 from csv source
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- ChartJs - Is is possible to show only tooltip in one dataset?
- Chartjs - Tooltip with Rupee Symbol
- Display a single tooltip with Chart.JS?
- Working with multiple date axes in ChartJS
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Possible to create quadrant chart with ChartJS, with the "origin" centered at a single point?
- Chart.js - loading multiple charts with draggable datapoints into a single HTML Page
- Connecting Two Datasets in Chart.js Into a Single Line
- Updating Chartjs to 2.5 with custom code
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- How to set Custom tooltip event with Chartjs version 2.X
- Two data sets with different time instances on the same ChartJs chart
- Chart.js - combine data and label into a single object
More Query from same tag
- Chart.js Multiple dataset
- Chart.js Doughnut chart inner label different than outer
- Y axis set custom value using chart.js
- Is there any way to get y of specific x which not belongs to the dataset in Chart.js graph?
- Chart.js extremely slow on 8 series of 500+ points
- PHP render stacked area chart of JSON dataset
- Unix Timestamp Chart.js with PHP echo
- Chart.js, Can you override the legend label box color?
- Django Time Series with Chart JS
- ChartJS - Display one set of data at a time
- who know how to put down the title of pie in ionic 2
- Update all Chart.js instances in order to apply changed defaults?
- How to add area with break on line chart with fill color
- chart.js scale xaxis with date, strange renderer
- Changing chart options dynamically in Chart.js
- NPM module doesn't work with Webpack 3 but works with vue-cli3 which based on Webpack 4
- Create a heatmap/punchcard Using Chart.js
- Using Chart.js with Pyramid Web Framework
- ChartJS - Time graph from JSON
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Better looking function
- How to get canvas/ctx object in Chart.js for an Angular project
- Chart.js Example Isn't working
- Understanding Chart.js and Adding Legends to Pie Charts
- Can a service get access to component's template
- Yii2 unable to view chart
- ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line
- Align Title Left React Chart.js V2
- Regarding stacked chart in chart.js
- How does one reproduce this plot in JavaScript?