How to create an interactive pie chart with javascript, html, css? - javascript

How to create a pie chart widget where the user can change the distribution of the pie chart by dragging the borders of the wedges?
Is there a package with such a widget in react?

Personally i have never seen a pie with draggable border to change the distribution. I have worked with ApexCharts (https://apexcharts.com/react-chart-demos/pie-charts/update-donut/). Each part of the pie is basicaly a number so, you can create for example a slider for each part and dynamicly update the part of the chart.

Related

Pie of pie charts in Highcharts Reactjs

I'm trying to create a pie of pie charts like they show in excel. I could not find a pie of pie support in highcharts for reactjs. I can create two pie charts but I can't seem to connect them with lines as shown in the image below. Is there a workaround for this?
click on one slice of pie chart and its move to its more detail like in i share links below
Pie of pie Example
click this for more info

One legend, multiple charts Chart JS

I have two pie charts with different data but same labels and background colors. How can I create a standalone legend (a legend without a chart) using ChartJS so that the legend corresponds to both the pie charts at the same time?
I tried creating a pie chart with the data array set to an array of 0s. However, that causes an empty pie chart to be generated, which takes up a lot of space; so that's a no go.
Any help would be deeply appreciated.

How to set curve to the labels in the Highchart Pie Chart

I'm using Highcharts JS library for drawing a pie chart where I have to show some labels in circular format. In my case, it's name of projects which I wanted to show in it's own block aligned with arc. See my code here Jsfiddle
I've tried with some other JS libraries like CircleType and Arctext to give the curve shape for these labels. But for this, the attribute ID needs to be set for the particular text which I'm not able to do. By modifying Highcharts.js, I can manage to set ID for the Title of chart and when I set the property like jQuery('#myid').arctext({radius: 50, rotate: true}); the title disappears.
So is it feasible to do this task in the graph?
Any help will be appreciated.

Adding labels and descriptive label to D3.js donut chart

I'm using the following d3.js donut chart: jsfiddel
What I would like to do is extend this example so that:
Each coloured section needs a text label
I want to colour in the centre of the donut, and add some text to the centre of the donut
I need to be able to style each path based on it's class, so how can I apply a class?
Any help appreciated, many of the samples for d3.js are hosted on a site which is currently down .

Google charts - How to display data with a pie chart side by side

I'm currently trying to find a way to display data related to a pie chart with the generated colors like "Color Label Value Percent" in a table or in legend field.
I'm providing the charts color, so Google decide by himself.
Here an example of what I'm looking for :
Btw, i'm using Google JSAPI to generate this svg pie chart.

Categories

Resources