I'm looking for an editable Gantt chart component that can be used in ReactJS. The need is to plot a resource Gantt chart where the user can change tasks on the time axis and also between the resources.
Preferably open source.
This one is really good too
https://github.com/guiqui/react-timeline-gantt
Can load thousands of records, has infinite scroll and task dependencies.
There is a gantt chart here which is ReactJS and open source (MIT) but as far as I can see not editable. But if you know ReactJS, making it editable would not be a huge job.
Docs: https://github.com/jamrizzi/react-gantt
Demo: https://jamrizzi.github.io/react-gantt/
You can take a look at this React Gantt chart component made with the help of dhtmlxGantt (js gantt chart library): https://github.com/DHTMLX/react-gantt-demo
Tutorial: https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
Related
As a base I use this gantt chart from Amcharts:
https://www.amcharts.com/demos/gantt-chart-dates/
Is there a way to let the user interactivly resize any of the items? I see there is a resizable Option for XY-charts in Amcharts but it doesn't seem to do what I need. Is there any other method of resizing the bars?
It's seems preety complicated to achieve that with amcharts becuase they are preety robust.
there is a an open-source project that will satisfy your needs - frappe gantt, it allows you to drag the bars themself. (I have no connection to the project).
I am using ng2-charts which is an Angular charting module based on Chart.js. I am facing an issue where there are unwanted "shadow" kind of while rendering the chart as shown in the screen shot. I wonder if there is any chart option that I need to tweak on in order to remove it.
Thanks]1
I managed to get rid of it by setting stacked option to false
I'm looking for something like this in D3 or C3js:
The default Gauge Chart in C3 takes in multiple columns as data, but then displays them on the same line, so they are overriding eachother.
If you're using Angular 4 you can use ngx-charts, which provides an easily configurable multi-series gauge. This is their demo page or just checkout their github repo. The package is written using D3 so you can likely customize it more if needed by forking the repo.
Maybe you can make more then one gauge's ?
If you choice the inner and outer radious ok, you can make 4 gauge's with only 2 values, so you have only 2 sections per donut pie / gauge.
Not the easiest option but a nice workaround.
I have some metrics to display, I need a simple barchart to show values for every day in month, and it doesn't need to have any labels or legend, when you hover the day, the data is displayed. I found this http://codepen.io/deegill/pen/macik which is something that I need but it cost 90$ smallest package. Does anyone have chart like this which I can use in my project?
A set of reusable charts using D3
http://nvd3.org/examples/line.html
If you want to make any chart I'd look at using D3. It's a pretty smart js framework that allows you to display data in a lot of different ways. Here is an example of it displaying a bar chart. And here is another example that uses time as the x value.
Google Charts API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
g.Raphael.js
http://g.raphaeljs.com/
Highcharts.js (Free for non-commercial use)
http://www.highcharts.com/
I've been using Flot for a few years now, and I have no complaints. Might take a little effort to get started, but we use it commercially, and it's great (and free).
I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.