score:0
You have to set options
for tooltip mode
to label
for showing multiple tooltip
options: {
tooltips: {
mode : 'label'
}
}
score:0
if you want to hide the label you can simply try this
options =
{
tooltips :{
titleFontSize : 0,
titleMarginBottom:-0.5
}
}
tooltip reference https://www.chartjs.org/docs/latest/configuration/tooltip.html
score:13
The Chart.js 1.x tooltipsTemplate is equivalent to options.tooltips.callbacks.title
in Chart.js 2.x:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
"Men",
"Women",
"Unknown"
],
datasets: [{
label: 'Sweden',
data: [60, 40, 20],
backgroundColor: [
'rgba(158, 216, 202, 0.75)',
'rgba(255, 150, 162, 0.75)',
'rgba(160, 160, 160, 0.75)'
]
}, {
label: 'Netherlands',
data: [40, 70, 10],
backgroundColor: [
'rgba(158, 216, 202, 0.5)',
'rgba(255, 150, 162, 0.5)',
'rgba(160, 160, 160, 0.5)'
]
}, {
data: [33, 33, 34],
backgroundColor: [
'rgba(158, 216, 202, 0.25)',
'rgba(255, 150, 162, 0.25)',
'rgba(160, 160, 160, 0.25)'
]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return 'This value ' + tooltipItem.yLabel;
},
title: function(tooltipItem, data) {
return 'The tooltip title ' + tooltipItem[0].xLabel;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
score:34
As potatopeelings has mentioned in the comments, you have to set a callback for the tooltip.
Here is an example:
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return datasetLabel + ': ' + label;
}
}
}
}
live demo
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Men", "Women", "Unknown"],
datasets: [{
label: 'Sweden',
data: [60, 40, 20],
backgroundColor: ['rgba(158, 216, 202, 0.75)', 'rgba(255, 150, 162, 0.75)', 'rgba(160, 160, 160, 0.75)']
}, {
label: 'Netherlands',
data: [40, 70, 10],
backgroundColor: ['rgba(158, 216, 202, 0.5)', 'rgba(255, 150, 162, 0.5)', 'rgba(160, 160, 160, 0.5)']
}, {
data: [33, 33, 34],
backgroundColor: ['rgba(158, 216, 202, 0.25)', 'rgba(255, 150, 162, 0.25)', 'rgba(160, 160, 160, 0.25)']
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return datasetLabel + ': ' + label;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Source: stackoverflow.com
Related Query
- How to use the tooltipTemplate on Chart.JS 2.0
- How to use set the color for each bar in a bar chart using chartjs?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to use the useEffect function in react js chart 2 to change the labels?
- How to add text inside the doughnut chart using 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?
- chart js tooltip how to control the data that show
- How to use PrimeNg Chart of Width and Height?
- How to properly use the chartjs datalabels plugin
- 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?
- 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
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to display the labels in doughnut chart using ng2 charts?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart js: how can I align the legend and the title
- PrimeNg bar chart how to show a label for the y-axis
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to get the actual chart width and height in chart.js
- How to make bar chart animation where all bars grow at the same speed?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Can I use a gradient in Chart.js without accessing the chart context when the chart is created?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Angular chart how to show the legend data value by default along with legend name
More Query from same tag
- Charts in Angular js with JSON Object
- Chart JS - Use time for xAxes
- How do I display a different chartjs tooltip title?
- How to send data from struts2 to a javascript function to draw a chart
- Set max value for each label with Chart.js
- Not able to draw Doughnut Chart from json response
- Is there a way to trigger point hit on an xAxis hover
- How to add an offset to a dataset in Chart js
- ng2-charts does not work When data is between 2 and 5
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- How should i apply date picker in my chart
- Cannot create Chart using Chart.JS @ 2.9.4
- chart.js display even intervals between two dates and adding label to y axes
- Displaying a chartjs chart within a bulma full height hero
- Visualizing intervals with range bar charts in chart.js
- How can I hide tooltip in Chart.js on a specific data label?
- Chart.js pie chart in table shows weird behavior on page resize
- Javascript 2D array getting each element
- How to set max/min on x axis to display time range in Chart.js?
- Creating dynamic object to reorganize API response using Typescript
- How to change React chartjs-2 legend click functionality to hide all except the one clicked?
- ChartJS custom bar chart
- Chart.js 2.0 doughnut tooltip percentages
- graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed
- why the main and axis title does not show in chart.js
- Show data dynamically in line chart - ChartJS
- Trouble getting Axis Labels to show up in Chart.js
- Charts.js not using the right colors
- Is it possible in chartjs to hide certain dataset legends?
- Charts.js scales yaxes ticks min max doesnt work