How can I activate a specific datapoint in an ReCharts Area Chart? - javascript

I have an AreaChart (actually a ComposedChart with an Area and a Line) and I would like to display a tooltip over one of the data points after the chart renders. Works great if I mouseover the chart, but I want it to display on render. For a PieChart I can do this via the ActiveSlice and set the slice I want to be active, then handle it in there, but for Area Charts I can't find a way.
I am actually using a Custom Tooltip and so could do this myself if I could get access to the internal data points that are created when the chart renders, but can't find a way to get at them (I was hoping they might be passed into onAnimationEnd, but no luck).
Any pointers appreciated!

Related

React Native Pie Chart - Want to show image (Victory Native)

I am adding a Victory native Pie chart in react native with some additional information to show within it. I am able to show different colors in the pie chart and able to show labels in it.
But what I want is - I want to show images also in Pie chart. Is there any workaround in it or some alternate way by which I can do it?

VueJs : Displaying pie chart data value of each slices

I want to display the labels and datasets of pie & doughnut charts on their sides. I searched for many options on the internet including stackoverflow, but couldn't find a relative solution for my case. Maybe I missed something.
Now I have:
I need to display the chart data on its side like this: (For my pie and doughnut charts above)
First of all, I dont see any bar chart here. Second, what library are you using for making charts? If you couldn't find proper option to display label in that library, I can recommend you to use Amcharts, its more flexible. Let me know if you get your desired results

How to get X-Axis value of google area chart without using chart.getSelection method

I need to find resolution of graph.for that I need first two values from X-axis values(which is time values) displayed on google chart but without any click events like chart.getSelection()graph example given here.
Also values keep changing when graph zoomed hence values are dynamic.Thankyou

Javascript Error: Highchart Legend Tooltip Error on Doubling Up Charts

I have a single chart webpage showing Highchart line:bar graph: http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_1Cht_01d.htm
with external chart data:
http://www.jcsweb.biz/mef/csv_dump/HC_TEST_DATA1.CSV
and Chart Legend Tooltip (long string) from an external file: http://www.jcsweb.biz/mef/csv_dump/HC_TEST_LEGEND1.CSV
So on mouseover of chart series legend, a much longer Legend tooltip is displayed (ie as held in HC_TEST_LEGEND?.CSV).
It all works fine, but hits problems with the longer Legend tooltip when I try and "double up" to display 2 (or more) such charts on a single webpage. http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_2Cht_01d.htm
The Upper chart long Legend tooltip displays fine (as above) but the Bottom chart doesnt display ANY longer Legend description from HC_TEST_LEGEND2.CSV.
In moving to 2 charts, I have tried to make the JavaScript code/variables names distinctive to each chart eg "legendData1" vs "legendData2" but I have run out of browser debug pointers to find the js coding legend tooltip error !
Any help/pointers on finding the offending code in Chart 2 much appreciated
The source of your problem is probably the value of e2.clientY. I debugged your code and it has the value higher than the chart's height. It seems that this value is relative to the whole document. When you assign attributes to your legend tooltip object then (.attr()) all the values are relative to the chart container. So in this case your tooltip is created outside of the chart and is not visible.
Here's live working demo of legend tooltip that uses properties of SVGElements instead of mouse event: http://jsfiddle.net/kkulig/mujn4eja/

Access/Manipulate Points on NVD3 Line Chart

I want to access the points of an NVD3 line chart independently, so I may hide/show them selectively, and pass them metadata to display in their tooltips.
I have a chart with an X-axis showing hours, 0-24. I wish to be able to selectively hide/show point markers at only select hours, to indicate some type of event has occurred at that time.
I am looking for a way, preferably, to get all the points as an array, iterate through them, determine if they should be hidden or shown, and manipulate their colour, and metadata for their tooltip.
I don't see any examples of being able to select all the points, but I know there must be a way.
Thanks for your help!

Categories