score:1
Accepted answer
you can do this easily by referring to the current dataset index tooltipitems.datasetindex
and then based on that index set the tooltip text like:
label: function(tooltipitems, data) {
var text = tooltipitems.datasetindex === 0 ? 'some text 1' : 'some text 2'
return tooltipitems.ylabel + ' ' + text;
}
working demo:
var ctx = document.getelementbyid('mychart').getcontext('2d');
var chart = new chart(ctx, {
// the type of chart we want to create
type: "line",
// the data for our dataset
data: {
labels: array.from({length: 5}, (x,i)=> `label ${i+1}`),
datasets: [{
label: "dataset 1",
data: [12, 123, 234, 32, 23],
}, {
label: "dataset 2",
data: [4, 54, 765, 45, 5],
}]
},
// configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipitems, data) {
var text = tooltipitems.datasetindex === 0 ? 'some text 1' : 'some text 2'
return tooltipitems.ylabel + ' ' + text;
}
}
}
}
});
.chart-container {
width: 500px;
}
#mychart {
display: block;
width: 500px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div class="chart-container">
<canvas id="mychart"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Charts.js - How to set custom tooltip text for each dataset
- Chart.js how to set cutoutPercentages for each dataset
- how to set color for each item in tooltip with ChartJS
- How we can set our own colors for each label in charts
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- How to disable a custom tooltip for a dataset in Chart.js line chart?
- How to disable a tooltip for a specific dataset in ChartJS
- How to set a full length background color for each bar in chartjs bar
- Add a text as tooltip for each point on a line chart
- How can I create custom tooltips for each data point in a graph?
- How to set colors for Chart.js tooltip labels
- chartjs custom y axis values, different text for each one
- How to use set the color for each bar in a bar chart using chartjs?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Set custom colours for tooltip squares Chart.js
- how to set color for each datapoint in chartjs-chart-treemap
- How to set X coordinate for each bar with react chart js 2?
- How can I set a class to a HTML element which is created by custom tooltip function?
- How to set Custom tooltip event with Chartjs version 2.X
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- How to make custom text appear underneath each bar in chartjs bar chart?
- Adding a second custom tooltip for charts in ChartsJs
- How to set default callback for tooltip title with chart.js
- How to show tooltip only for show x values in react charts
- The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular
- How to set max and min value for Y axis
- Chart.js - How to set a line chart dataset as disabled on load
- Chart.js Line-Chart with different Labels for each Dataset
- chartjs : how to set custom scale in bar chart
- Charts JS: How to set units?
More Query from same tag
- Charts doesn't appear
- How to generate chartjs charts to pdf using laravel?
- How can I create a time series line graph in chart.js?
- Chart.js Line-Chart with different Labels for each Dataset
- Chart.js stacked bar chart in opposite direction
- Query with empty results laravel eloquent
- Chart.js not showing data when pass dynamic labels
- Error: [$injector:unpr] Unknown provider: chart.jsProvider
- using react-chartjs-2 , How can I save my chart as png using a download button
- How to pass a dictionary to ChartJS?
- How can I display both values as labels when hovering over chart.js
- Chartjs Percents in Legend
- How to connect Firebase in Chart.js?
- Chartjs v2 stroke shadow
- Chartjs Bar Chart Y Axis set base starting value to not be 0
- Animate Chartist on show
- Line chart: align x axis (timestamps) for multiple data sets
- Fade other lines when hovering legend in Chart.js
- CHART.JS scriptable backgroupColor attribute
- Hover event in graph Chart.js
- How to change chart js data on button click
- What happened to generateLegend() in chartjs 3.0?
- Foreground chart by mouse
- How can I put sign (%) on data in ChartJS?
- Chart.js on web-app
- how to access array inside object without keys
- Adding a line break in Chart.js (2.7.2) labels section
- Issue loading chart.js zoom plugin with require.js
- Accessing data from the callback function of a bar chart using chart js
- How to make data always visible on bars Chart.js