I am trying to get labels on side of my doughnut chart. I am using chart Js, any help would be great.
On the link bellow: is an example of how i want the chart to look like
https://i.stack.imgur.com/HRDvo.png
According to the chart.js documentation that is not possible.
But take a look at chartjs-plugin-piechart-outlabels plugin. Which can be used to display labels on side of doughnut.
Related
I am working on react(chart.js) and i need multiple label on my chart,one inside and other for outside the doughnut chart. Anyone know how can i do this ?
use plugin-labels for chart-js, it support multiple labels also.
plugin labels
1
Hello everyone,
I'm working with Nivo's Pie chart and i would like to ask if is it possible to add the hover effect to show the arclabels and links (nr.2- see picture) and not the labels from nr.1 like how it is on default.
Thank you in advance!
I'm displaying a Chart.js doughnut chart via react-chartjs-2 in React, and by default, there are these line-box things showing for each doughnut section. Here's an example:
What are these line-box things called, and how do I turn them off?
Also, for what it's worth, they don't seem to show up by default in the base Chart.js library, but they show up for doughnut (and probably pie) charts in the react-chartjs-2 npm package. I've searched and searched, and tried toggling a bunch of options for the legend, legend labels and tooltips, but to no avail. I cannot figure out how to turn these off. Thank you for your help.
Thanks again to LeeLanalee for pointing me in the right direction.
Unbeknownst to me, there was a Chart.js global plugin set up for all the doughnut charts called chartjs-plugin-piechart-outlabels (https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels). As per following SO post, I was able to disable the line-box labels for specific instances of the doughnut charts (in React) as follows:
ChartJs - Pie Chart - how to remove labels that are on the pie chart
options={ {
plugins: {
outlabels: false
}
} }
Thanks again!
I am using React + Recharts to create a stacked bar chart, is it possible to make data label look like the below image?
here is the complete demo
any help pleas?
You can just add another rect, working sample: https://codesandbox.io/s/rechartsstackedverticalbarchart-test-forked-433bb?file=/src/App.js:554-631
I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.
Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).