I am working on a requirement-->" it is required to generate a stacked area chart with tool tips".
I am able to do it using he grafico open source js published in this url http://grafico.kilianvalkhof.com/documentation/#basics
But when I try to customize the tooltip for the area chart, tool tip starts drifting from its position.
I found Google apis provides a better tool-tip from their implementation . please find the implementation on on this url https://developers.google.com/chart/interactive/docs/gallery/areachart#Stacking( here tool-tip does not drift from its position if I change length of text in the tool tip) and tool-tips are highly customizable.
The grafico tool-tip implementation is having issues ,but the google implementation is better.
When i try to customize the tool-tip in grafico chart it starts drifting out of its position.
Also it is not possible to have multiple text with different styles inside the tool-tip.
Any clue on how to achieve this?
I could not customize Grafico since there were many issues.
So finally I used Jquery FLOT java script library and able to generate Stacked area chart with tooltip.
Jquery is really cool and easy to use, with so much help and support available online.
Related
I have been using plotly but it doesn't support images or other custom designs inside the hover tooltip.
What javascript / react packages have highly customizable tooltips? I just need it for a scatter plot and bar chart
I think Apache ECharts might help you on that, it is really customizable (open source!) and has good documentation.
Some links for the stuff you are looking to work on:
Scatter Plot examples: https://echarts.apache.org/examples/en/index.html#chart-type-scatter
Bar Chart examples: https://echarts.apache.org/examples/en/index.html#chart-type-bar
Tooltip documentation: https://echarts.apache.org/en/option.html#tooltip
Recharts seems to have a custom tooltips supported, should work:
https://recharts.org/en-US/examples/CustomContentOfTooltip
I am looking for an open source visualization package to create a 3d bar chart similar to the one I have created in excel (see image below). I have tried vis.js, but there was no way I could tell to format the 'walls' to show gridlines and a background color. If this is possible in vis.js I could do that as well, but I didnt see anything in the documentation.
The features I need are:
Gridlines for 'walls'
background color options for 'walls'
Free movement/rotation
Ability to change individual bar color based on some logic
Ability to export image to pdf, etc..
Ideal Chart (excel):
Best I could do with vis.js:
Any help or suggestions would be greatly appreciated! Thanks!
Have a look, HighChart has great features, you can use the non-commercial version.
https://jsfiddle.net/oscjara/4mjp7egw/
here is the library
jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/3d/skewed-labels/
Does anyone know of a js chart that can plot multiple lines that can have different plot intervals? I can only find HighCharts but need an Open Source one. A great example of what I'm looking for is available on highcharts demo page:
http://www.highcharts.com/demo/combo-timeline
Thanks
I have use Google charts in the past, they are pretty easy to inject in your code, and they support multiline. Check em out.
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
I've been playing around with the Timeline chart from Google Charts. It's great because it's very easy to use. However, I stumbled upon quite some limitations:
It's not possible to adjust the height of the bars, or the amount of margin around them.
I cant format the labels of the hAxis. No fonts can be applied, or textcolor, or font-size. And for some reason, two of the labels are in bold. (see image below)
It's not possible to add a text column on the right containing an extra set of information (for example, the sum of all hours in this row)
I can't move the hAxis to be displayed above the graph instead of below
etc...
Here's a link to the image:
For this reason, I was hoping some of you could introduce me to an alternative tool or api that I can use. It needs to be easy to use, and free/opensource. I've Googled for numerous chart tools, but almost no tools provide this SIMPLE timeline type of chart (note that it's not a Gantt chart, but it looks like one).
There are a few Gantt chart Javascript libraries, but none seem to be close to the Google Timelines chart.
The only chart I could find that is similar is Visavail.js. It builds upon D3.js and is open source, so you can modify it to your liking. Check out the "Custom Category Data" example. It's a lot like a Google Timelines chart.
For your convenience, I've added a screenshot of the example below:
If you are familiar with d3.js, here is a d3js based example: http://bl.ocks.org/bunkat/1962173
Does anyone know any example of a Raphael bar graph? I checked gRaphael but the bar graph that it generates is not what I want. I want a bar graph that looks like the graph here - http://www.rgraph.net/canvas/bar.html#example . I don't want to use rgraph as it's not free for commercial applications.
EDIT: Now, RGraph is indeed entirely free - licensed using the MIT Open Source license
If Raphael is not a hard requirement, you could take a look at Highcharts. They have a nifty javascript charting library.
Have you looked at Raphael's graphing sub-library, gRaphael?
There are bar chart examples on the gRaphael home page. Just navigate to them and view their source.
Hope that helps.