score:0
similar to the answer by hannes but the documentation has been updated since then - there are various options now and the link he provided no longer goes anywhere as that option is deprecated.
i'm adding a new answer as it took me a while to find.
this is x mode - displays multiple dataset info in tooltip based on x axis
var chart = new chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'x'
}
}
})
http://www.chartjs.org/docs/latest/general/interactions/modes.html#x
there is also 'y' mode. label mode is now deprecated.
you can also use 'point', 'index' and 'nearest' mode.
score:1
as i answered here, you can give multitooltiptemplate a function. put a breakpoint inside that function with 'debugger', and explore the given object for all the properties you'd like. then construct a string to be displayed in your tooltip:
multitooltiptemplate: function(v) {debugger; return somemanipulation(v);}
tooltiptemplate: function(v) {return someothermanipulation(v);}
score:10
want to update the answer, because i was searching for a long time.
you can now change the tooltips settings inside the options. see docu: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
as for the asked question, to show all x data.
window.mybar = new chart(ctx).line(barchartdata, {
tooltips: {
mode: 'label'
}
});
cheers hannes
score:134
change
window.mybar = new chart(ctx).line(barchartdata, {
responsive : true,
animation: true,
barvaluespacing : 5,
bardatasetspacing : 1,
tooltipfillcolor: "rgba(0,0,0,0.8)",
multitooltiptemplate: "<%= label %> - <%= value %>"
});
to:
window.mybar = new chart(ctx).line(barchartdata, {
responsive : true,
animation: true,
barvaluespacing : 5,
bardatasetspacing : 1,
tooltipfillcolor: "rgba(0,0,0,0.8)",
multitooltiptemplate: "<%= datasetlabel %> - <%= value %>"
});
the change is to the last line
multitooltiptemplate: "<%= datasetlabel %> - <%= value %>"
datasetlabel
gets the value of the label from the dataset objects (in this case 'bob' and 'tina'), whereas label
gets the caption printed on the x-axis (part of the labels
array)
Source: stackoverflow.com
Related Query
- Limit labels number on Chart.js line chart
- Chart.js multiTooltip labels
- Chart.js Show labels on Pie chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- chart.js: Show labels outside pie chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart JS data labels getting cut
- How to display Line Chart dataset point labels with Chart.js?
- Making the labels responsive in chart js
- Chart.js - Draw bar chart with multiple labels
- Chart JS grouped sub labels
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- Changing x axis labels in Chart.js line chart
- How to display data labels outside in pie chart with lines in ionic
- Line chart with large number of labels on X axis
- Center point labels between ticks (Polar Area Chart JS)
- How to align Chart.JS line chart labels to the center
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to display the labels in doughnut chart using ng2 charts?
- Chart.js Bubble chart with custome X-axis labels
- Change labels colors for radar chart js
- ChartJS: Show all labels of a mixed chart in the tooltip
- Chart.js Radar Chart How to Remove Outer Labels
- ChartJS 2.0 - Huddle labels on pie chart
- Multiple line labels for chart js
- Remove radar chart labels in chart.js
- Chart JS: Ignoring x values and putting point data on first available labels
- Show labels on each sector to polar chart using angular js chart
- chart js Labels and Grouping labels
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
More Query from same tag
- How to increase gaps between vertical gridlines in chartjs
- how to change display and styles of the labels in react-chartjs-2
- Chart Js clickable bar
- 2 Line Chart with different labels | Chart.js
- json file to charts
- Remove animation time for chartjs datapoints
- Adding new data to empty Chart.js chart does not render new data correctly
- Add Extra label in a pie chart
- Chart.js Auto Fit Failing
- chart.js on animation end callback
- Change point style in Chartjs via external event
- Printing chartjs tooltips
- chart.js won't display the chart in IE
- Is there an option in chart.js to hide values in the graph legend
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- How to clear the data for a angular-chart
- Execute script after loading server side rendered React component
- chart.js with json data and jquery - error :-(
- ChartJS for 1 and 0 values display true or false
- How to set a responsive chart.js chart to not fill screen?
- chartjs-plugin-annotation box in Django app
- how do I change the textsize in of doughnut in react-chartjs-2?
- Parsing JSON data into Chart.js bar chart
- How to create a chart that uses strings for both the X and Y axes?
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- Parsing error: Unexpected token, expected ";" line 54 in .map function
- Chart.js Polar Area Chart is not scale right
- ChartJS 3.7.1 tooltip callback, get label value for the next index
- Multi dataset line graph from table
- Modify the legend of a double doughnut with chart js