javascript / react charting package that supports image inside tooltips on hover? - javascript

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

Related

Javascript visualization package for multidimentional bar chart

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/

Can I use Plotly to make animated graphs?

I've come across Plotly and I am wondering whether it is possible to animate things like bar charts with it. I noticed the Streaming API but I do not think that is what I need...
Can I use JavaScript to manually do this?
you can probably check out the postMessage API here.
Animations were just released in in Plotly.js. Docs are here: https://plot.ly/javascript/animations/
To answer your question, yes you can animate bar charts made with Plotly. Plotly has an open-source JS library built on top of D3 which should make it very easy for you to create your own animated bar charts. You could also just use D3 instead of Plotly.

Improve tooltips area chart using Grafico

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.

Are there any 'Diskring' style chart frameworks?

Are there any javascript charting scripts / frameworks that support a drill down 'Diskring' style chart? as shown below, when you click on a section the chart should reanimate to the next level.
Yes, take a look at D3.js sunburst diagram

Anyone knows of an example of a good bar graph generated using Raphael?

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.

Categories

Resources