How to draw a complex Gantt chart in react? - reactjs

I am trying to build a gantt chart, wherein a single row can have multiple horizontal boxes. Something as shown in the below image.
image-1.
I have explored following react packages, but seems no one is enough to draw multiple horizontal boxes in a single row as shown in the images.
Packages:
react-google-charts
frappe-gantt-react
react-gantt
Please do suggest some solution. Any kind of help is appreciated.

There is a superset of Gantt chart, called Timeline chart. That would help one to implement above mentioned chart.

Related

Multiple Rectangle Selection in React

I'm attempting to make a project where you can submit an image and select players from it (basically draw a resizable rectangle around them).
But I'm not sure where to begin.
Could someone please provide a tool, npm module, or article that might assist me in accomplishing this?
Something like this but all the rectangles are resizeable and draggable
Thanks
you can use react shape editor
https://www.npmjs.com/package/react-shape-editor/v/4.0.0-alpha.2

Anychart zooming on non-map chart types

Working on a project using AnyChart and I'm unable to get zooming to work on any non-map type charts (specifically working with scatterplot.) It doesn't seem like they support anything other than a scroll bar as far as zooming goes for charts like scatterplot.
Does anyone have any clever solutions to be able to add zooming to these charts?

Angular-Chart drilldown options in doughnut chart

When each segment is clicked,need to form a another chart with its respectively lower level of a data.
This experience need in Angular-chart.js
Unfortunately, there is no support for that with angular-chart.js, you have to implement it by yourself.
Also angular-chart is getting inherited from chart.js, there is already asked question
See Any support drill-down charts?

Silverlight Toolkit Pie Chart Add Labels

I have been working with Silverlight for some time now but this is my first experience with the charting capability provided by the silverlight toolkit. Basically I am trying to create a pie chart that contains labels for each slice of the pie. The labels can be inside the pie piece itself or outside it makes very little difference to me. My data set is very simple. I have a Result class that contains 2 properties, a name and a count and I am using that as the source for the pie chart.
I have tried to google this but most of the results I get pertain to telerik or other 3rd party controls.
Can someone please share there wisdom on how to accomplish this? Thanks.

Extjs4 how to add annotation on line chart

I want to do the same function like this
https://developers.google.com/chart/interactive/docs/gallery/annotationchart?hl=zh-TW
Does extjs have the same chart?
thx
Theres is nothing right out of the box with ExtJS for this but you could build your own using a linechart, scatterchart and a DataView on the side to display the comments. (Building the time slider at the bottom would be a little harder but it can be done as well).
What I would do however, is avoid myself a lot of work and follow this tutorial on how to integrate Google Charts with ExtJS: http://code.betancourt.us/ext-google-visualization/
Good luck!

Resources