2

enter image description here

Hi, I'm working on a React project and I must create a pie-chart with two range sliders on the circle. With these two sliders you can change the coloured parts percentage as you can see on the picture. I've been searching for few days on the web but I don't find something equivalent. Is somebody know how to do that in Javascript (or with an npm package)? It would be very helpfull for me, i feel a little bit lost!! Thank you very much.

Brice Le Gallo
  • 21
  • 1
  • Can you show us what you have tried so far, both in terms of code and research around similar components? Have you found any similar components that are close to but not exactly what you are trying to implement? – Thomas Upton Jun 02 '20 at 22:16
  • Hello Thomas, I'm still searching, I don't know if what I want is a pie-chart or a circular range. I found an npm package for React : "react-circular-slider" but there's just a min and max. I tried to find something with "charts.js" but there's no pie-chart with sliders on the its edge. I searched on "Gsap" but nothing like on my picture or close to. I would like to code it by myself but I don't know how to begin something like that... I'm a beginner... – Brice Le Gallo Jun 04 '20 at 21:25

1 Answers1

0

Based on your requirement the functionality seems the combination of both circular range slider and pie chart. I am not sure any specific component for this use case.

So I have created this using roundSlider and jqPlot plugins.

You can check the below demo for your requirement:

DEMO

Screenshot:

round slider with pie slices

For the simple demonstration I used the jQuery plugins, but I hope these can be used in the react as well. So I believe this might helps you or atleast helps to get a direction to achieve your requirement.

Soundar
  • 2,569
  • 1
  • 16
  • 24