I am using chart.js and react-charts-2 in my React app to make Pie chart, how can I show labels name outside every section of pie chart like this:
Desired Outcome
you can checkout this plugin to display the labels outside pie chart in chartjs.
https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels to add it in the react-charts-2 you can use its plugins prop.
Don't know how to pass props then please checkout https://react-chartjs-2.netlify.app/components/pie#props to know how to pass props in Component.
Related
Previously with chart.js v2, I could loop through the dataset object within the chart object and find out the default colors that were assigned. I then use these colors to color custom buttons elsewhere on my webpage.
With chart.js v2 I could find the color by looking for this attribute:
chart.datasets[index].borderColor
With chart.js v4, the borderColor attribute is not defined unless I had specifically chosen a color myself when adding the dataset.
I have tried expanding the chart object in the debug console and couldn't see where I would be able to read the auto-assigned chart colors. I am hoping someone can point me in the right direction.
Note, this is part of an angular app, and I am using ng2-charts to load chart.js. I intend to loop through the chart object to find the dataset colors in the html template.
Here is what the chart object looks like with v4:
With chart.js v4, the chart configuration has changed slightly, so accessing the default colors require a different approach. Instead of looking for the borderColor attribute, you can just access the backgroundColor attribute of the dataset object to get the default colors that were assigned to each dataset.
Best of luck.
I am adding a Victory native Pie chart in react native with some additional information to show within it. I am able to show different colors in the pie chart and able to show labels in it.
But what I want is - I want to show images also in Pie chart. Is there any workaround in it or some alternate way by which I can do it?
I want to display the labels and datasets of pie & doughnut charts on their sides. I searched for many options on the internet including stackoverflow, but couldn't find a relative solution for my case. Maybe I missed something.
Now I have:
I need to display the chart data on its side like this: (For my pie and doughnut charts above)
First of all, I dont see any bar chart here. Second, what library are you using for making charts? If you couldn't find proper option to display label in that library, I can recommend you to use Amcharts, its more flexible. Let me know if you get your desired results
I'm creating a stacked bar graph, and I was wondering if I could modify the legend so I would be able to place an image/icon instead of the default box.
Default look:
What I want it to look like:
There is no API that would allow inserting images instead of series symbols in legend. Quickest solution that comes to mind is to create custom legend inside a chart using Renderer (API: http://api.highcharts.com/highcharts#Renderer) or outside a chart using HTML elements. Other than that is it possible to extend Highcharts (How-to: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts) and enable this additional feature.
Example with custom legend outside a chart: http://jsfiddle.net/hs941kka/
I need to set the pie chart slices in my wijpiechart to the color retrieved from the database for that row. Using webservice to retrieve this info and javascript to render the wijpiechart. Any help would be very much appreciated.
Thanks,
Hindy
You can set the colors coming from the database in the series of the pie chart by setting 'seriesStyles' option. You may refer to the following demo sample that uses this option:
http://wijmo.com/demo/explore/?widget=PieChart&sample=Colors%20Formatting