score:9
Accepted answer
to add all the data from a specific label (date) in the tooltip, you need to set tooltips mode
to index
in your chart options, like so :
options: {
tooltips: {
mode: 'index'
},
...
}
ᴅᴇᴍᴏ
var chart = new chart(ctx, {
type: 'line',
data: {
labels: ['jan', 'feb', 'mar', 'apr', 'may'],
datasets: [{
label: 'line 1',
data: [3, 1, 4, 2, 5],
backgroundcolor: 'rgba(0, 119, 290, 0.2)',
bordercolor: 'rgba(0, 119, 290, 0.6)'
}, {
label: 'line 2',
data: [4, 2, 3, 5, 1],
backgroundcolor: 'rgba(0, 119, 290, 0.1)',
bordercolor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="ctx"></canvas>
score:-1
for chart.js version 3.x use tooltip:
options: {
tooltip: {
mode: 'index'
},
...
}
Source: stackoverflow.com
Related Query
- Add all data in the tooltip of Chart JS
- How to show tooltip value of all data falling on the same axis in chart js?
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- chart js tooltip how to control the data that show
- ChartJS: Show all labels of a mixed chart in the tooltip
- ng2-Chart: can we show the tooltip data of pie chart on load?
- chart js: when all the values passed to data are zeros, nothing is showing
- How to add text inside the doughnut chart using Chart.js?
- ChartJS add tooltip to a grouped bar chart
- How to add text in centre of the doughnut chart using Chart.js?
- Chart JS show multiple data points for the same label
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chart Js Show the old data on mouse hover
- React ChartJS 2 : Get data on clicking the chart
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart JS display Data Value on the top of the Bar
- How to make bar chart animation where all bars grow at the same speed?
- Add a custom label to the top or bottom of a stacked bar chart
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Chartjs - Insert additional data into chart tooltip
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Custom data position on the doughnut chart in chart.js
- Add a text as tooltip for each point on a line chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- Chart.js tooltip at any point on the chart
- Angular chart how to show the legend data value by default along with legend name
- Charts.js - Need to remove the data value from the Tooltip
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to commaize the data values provided to a chart in Chart.JS?
More Query from same tag
- Bar chart with vertical lines in each bar
- Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart
- want to provide a space between the maximum value and the graph
- Chart.js 2 line charts with separate dataset labels
- Price history with chart js
- Usage of Chartjs in Angular2 App
- Can't reuse a template in Vue.js
- Is there any way to get y of specific x which not belongs to the dataset in Chart.js graph?
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- Run Chartjs Dart example
- generator-angular-fullstack and angular-chart.js not displaying charts
- Loop through array of objects in Node
- show name on yaxis in chart.js
- Change color of one value in the x-axis charts.js
- Using Variable in labels Chart.js of map Array
- ChartJS: Show all labels of a mixed chart in the tooltip
- set scroll on bar chart in chartjs
- Chart.js won't display percentage label when value is above 1000?
- Series Details Not Showing in Angular Chart with Charts.js
- How to apply image on each bubble in chartjs?
- Looping variables or array
- chart.js: set specific numbers in y-axis
- Why are the chartjs tooltip labels always showing the first x-axis label?
- ChartJs functional component does not refresh even when forceUpdate
- Using Objects in chartjs
- How to update a chart using VueJS and ChartJS
- chart.JS i want to put different color for each Y axis value grid line color
- Move x-axis to pass through given y-axis value in chart.js
- Chart.js does not display any data
- Add multiline labelString to yAxes Chart.js