score:1
Accepted answer
you use the customtooltips option. here is an example adapted from https://github.com/nnnick/chart.js/blob/master/samples/pie-customtooltips.html
html
<canvas id="mychart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
css
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
js
var ctx = $("#mychart").get(0).getcontext("2d");
var data = [{
value: 300,
color: "#f7464a",
highlight: "#ff5a5e",
label: "red",
otherdata: "<div>horror: 10%</div><div>romance: 30%</div><div>rest: 70%</div>"
}, {
value: 50,
color: "#46bfbd",
highlight: "#5ad3d1",
label: "green",
otherdata: "<div>horror: 25%</div><div>romance: 25%</div><div>rest: 50%</div>"
}, {
value: 100,
color: "#fdb45c",
highlight: "#ffc870",
label: "yellow",
otherdata: "<div>horror: 1%</div><div>romance: 3%</div><div>rest: 96%</div>"
}]
var tot = 0;
data.foreach(function (item) {
tot += item.value;
})
tot *= 0.01;
var mypiechart = new chart(ctx).pie(data, {
tooltiptemplate: "<%=label%>",
customtooltips: function (tooltip) {
// tooltip element
var tooltipel = $('#chartjs-tooltip');
// hide if no tooltip
if (!tooltip) {
tooltipel.css({
opacity: 0
});
return;
}
// set caret position
tooltipel.removeclass('above below');
tooltipel.addclass(tooltip.yalign);
// set text
data.foreach(function(item) {
if (item.label == tooltip.text)
tooltipel.html(item.otherdata);
})
// find y location on page
var top = tooltip.y - tooltip.caretheight - tooltip.caretpadding;
// display, position, and set styles for font
tooltipel.css({
opacity: 1,
left: tooltip.chart.canvas.offsetleft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsettop + top + 'px',
fontfamily: tooltip.fontfamily,
fontsize: tooltip.fontsize,
fontstyle: tooltip.fontstyle,
});
}
});
fiddle - http://jsfiddle.net/u463hctb/1/
Source: stackoverflow.com
Related Query
- Chart.js Show labels on Pie chart
- chart.js: Show labels outside pie chart
- How to display data labels outside in pie chart with lines in ionic
- ChartJS 2.0 - Huddle labels on pie chart
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Pie chart isn't loading, but the labels are
- Display data labels on a pie chart in angular-chart.js
- Hide labels from pie chart in chartjs
- How to get labels on ChartJS Pie chart segments
- How to display labels outside the pie chart border?
- Create a pie chart in chart js with labels
- Char.js - How to show labels by default in pie chart
- How do we put labels on pie chart arcs - chart.js/vue-chart.js
- Chart.js multiTooltip Labels in Pie
- Chart.js not showing all labels on pie chart
- chart.js: segment true is not working in labels outside pie chart : chart.piecelabel.js
- How to show labels above pie chart in chart.js
- Limit labels number on Chart.js line chart
- Chart.js multiTooltip labels
- Chartjs random colors for each part of pie chart with data dynamically from database
- Pie Chart Legend - Chart.js
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How set color family to pie chart in chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart JS data labels getting cut
- chartjs datalabels change font and color of text displaying inside pie chart
- How to display Line Chart dataset point labels with Chart.js?
- Making the labels responsive in chart js
- Chart.js v2.6: Add arrows to pie chart output values
- Display values outside of pie chart in chartjs
More Query from same tag
- Wrong label value is displayed on point hover - Chart.JS
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- Using vue-charts.js, I cannot get hoverOffset to work with doughnut
- How to show multiple datasets in line chart js
- Chartjs: Rotate Axis Title
- Chartjs not picking up twig variable for label
- How to add space to the bottom of the chart in chartjs [angular]
- VueJS + Chartjs - Chart only renders after code change
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- Chart.js - mixed chart types (line/bar) on time scale causing offset problems after migration to v3
- Rails 4.2 jQuery loads only after refresh
- How do remove the bottom scale on a Chart.js bar chart
- Chart.js not working after Django deployment on Heroku
- Any way to make the y-axis border longer in chart.js?
- Cannot visualise chartJS data in ASP .NET Core
- Chart.js - Scale of secondary y-axis?
- How to add images to chart labels with vue-chartjs?
- How can I merge multiple HTTP calls to one entity model in Angular
- How to reduce the number of data points displayed in react-chart-js2 (data decimation)
- ChartJS date formating
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- Need help in figuring out config for a custom tooltip (chartjs)
- How to reorganize data to display how many times a string appears in an array object?
- chart.js 2.7.1 | Updating charts with variables
- Chart JS - Disable lines and Uncheck legends by default
- How do I increase the arrow length on the pie chart in Charts.js?
- Chartjs blocks jumping to a section in ASP.NET MVC 5
- how to add a background that display "no data" on Canvas using ChartJS?
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- Chart.JS does not render and display a sad face icon