Annotations drawn by a user can be serialized to json in Anychart like below.
const data = chart.plot().annotations().toJson(true)
But is it possible to set an anchor on the x axis when serializing annotations drawn by a user so that it can be deserialized exactly where annotations were drawn in terms of x axis?
For instance, if the date range of the x axis changes the candlestick chart in the attached example will change, but annotations will be rendered in the same position, which becomes irrelevant. So it would be good if annotations could be moved (translated) along with the x axis.
example
Related
I am trying to implement the following example inside a Recharts LineChart: the Tooltip value is relative to the blue point, because my mouse happens to be near it, and further away from the grey point with the same x-value. If I move the mouse closer to the grey point, the tooltip content changes.
However, all available examples show that a Recharts Tooltip receives data about all the data series being drawn and that it seems not possible to discriminate the point nearest to the mouse, so that the Tooltip may provide its value only.
Is there a way to specify for which dot I want to send data to the Tooltip?
At the end of a long fruitless search, I decided to solve this problem myself.
The minimal code is published in this Github gist.
The basic problem to solve is that any standard Recharts tooltip receives information about:
the x-value where the mouse pointer is at the moment, expressed in pixels on the chart canvas
the y-values for all the data series in closest position to the mouse x-value, expressed in the y-axis real-world unit (euros, kilograms, etc.)
It is necessary therefore to feed the custom tooltip also with y-axis mouse position information expressed in pixels on the chart canvas.
The tooltip can then calculate which data series is closest to the vertical mouse position and display only the value belonging to that data series.
Extracting the y-position in pixels is tricky, because Recharts changes the mapping between pixel and ordinate values each time it redraws the chart. But there is a chart component that must know very well this mapping, in order to place itself at the right vertical position and display the corresponding real-world ordinate value: that's every tick on the y-axis.
Problem is: how do we plug into the Recharts drawing workflow in order to get to know the mapping?
Here's how: the tick property of the Recharts YAxis component allows to provide a custom React component, albeit not documented with examples.
This custom component is instantiated one time for each tick that Recharts decides to place on the y-axis.
By trial and error I found out that my custom Tick component receives the following properties:
{ x, y, payload, ...anyCustomPropertyAddedByMe }
Where x and y are the cartesian coordinates of the tick (canvas pixels) and payload is such an object:
{ coordinates, isShow, offset, tickCoord, value }
Where value is expressed in real-world y-axis units.
The idea is to find out the couple (y, value) for the lowest and highest tick in each drawing and calculate the conversion factor between pixels and real values.
This will allow the custom tooltip to perform the computations mentioned above.
(Strictly speaking it would be enough to collect two couples from the first two ticks that are instantiated at each chart repaint, but choosing the two most far apart gives more precision)
The whole algorithm is divided among three components:
a tooltipCollector: this is a JavaScript module that presents two methods:
collect(value, y), invoked by the customized tick, that stores all couples (y, value) in a private array _collection
maxAndMin(), invoked by the custom tooltip, that reads the _collection array and returns the couple of items in the collection that represent the lowest and highest ticks (watch out that vertical pixel values in a canvas are measured upside down!)
a CustomizedTick React component that:
receives the tooltip collector among its custom properties
sends its y and payload.value to the collector by invoking its collect(y, value) method
returns a very simple JSX tick markup that makes usage of y (to place itself at the right vertical position) and payload.value (to display the user the real-world value the tick indicates)
a CustomTooltip React component that:
receives the tooltip collector among its custom properties and invokes its maxAndMin() method
verifies (by considering its prop coordinate.y) whether it's close enough to one of the chart data series, using a threshold value; this ensures that the tooltip is drawn only when the mouse cursor is very close to a point on the graph
modifies its returned JSX markup to contain only the value relative to the data series the mouse is closest to; in case more points in the chart are closer than the threshold, the tooltip will present more than one value
The code in my gist has been simplified to remove all unnecessary JSX markup. It presents a chart component that puts at work all the above mentioned components.
Please note that the standard Recharts behaviour of highlighting all the data series' points to which the tooltip abscissa is pointing has not been changed. It is therefore good practice to put a color code in the tooltip content to illustrate clearly to which data series the displayed value belongs.
I currently have this issue where I am trying to hide the Y-axis of this line chart. Currently there is only the option to hide both axes in GDS.
Issue being is that the floating number at the y axis looks awkward.
Could anyone think of a work around? maybe hiding both axes and then creating a blank chart with the date values and using that as the x axis ticks.
One workaround is to draw a Shape or line over the axis and set it to a colour that blends in with the background, (although in the case above, it would cut into the first data point and data label) using Shift + movement keys for precision placement.
Google Data Studio Report as well as a GIF to elaborate:
I have Highchart 4.2.4 Line type Chart drawing the Graph with multiple Series data. The data can be categorised in two types for e.g. Type A and Type B. What I need to do is show Y Axis of series belonging to category A on Left and category B to right. As shown in image. I need to know if I can show category B series Y axis stacked one upon the other. Even if the have same Y axis points for e.g. both have 0 and 1 as Y axis value. But it should be showing series data and its Y axis one upon the other like stack(newest series on the top)
Is this Possible to achieve in highchart/ any similar example that meets my requirement?
In the Highcharts you can declare multiple yAxis like in the demo:
http://www.highcharts.com/demo/combo-multi-axes
For this specific demo, you should use the Renderer to add the paths and labels.
Docs:
http://api.highcharts.com/highcharts#Renderer.path
http://api.highcharts.com/highcharts#Renderer.text
I'm using the newest chart control from silverlight toolkit to plot some data. For small cases it works ok, but for bigger samples the X axis labels overlap. It would be no problem if the chart would simply omit some of the values or I could specify to just show every 10th of them ...
I couldn't find any properties providing this behavior. Any ideas?
Assuming this is a Linear axis then you can specify the interval to use via the the Interval property on the axis.
If the axis in question is Category Axis then dropping some labels may not be valuable to the user. One option is to use the LayoutTransfomer to rotate the labels to an angle reducing the width needed for each one. See this Delay Blog on the subject.
In our application we allow users to chart enum values over time. We want the values plotted on the y-axis according to their integer values. However, we want the y-axis labelled with localized strings. And we'd like the "tooltip" diplayed when you hover over a plotted point to display a localized string.
I thought this would be "simple" since the Chart Control apparently will graph any IComparable data. So I created an EnumValue class that implements IComparable (based on int value) but that has a property named Value (used for binding) that is of type String.
So I thought I had been very clever and attempted to graph my EnumValues. When trying to display the graph of EnumValues I was told that the Chart control could not find a suitable axis to display the data. This makes sense as my data can't be plotted with the default LinearAxis. (I mean where would it plot the value "Off").
My question, is their a simple way to do this (like providing a map from int values to strings that the chart will automagically use), or will I have to define my own subclass of RangeAxis (or DisplayAxis) that tells the Chart how to plot these EnumValues.
I think creating the EnumAxis wouldn't be too hard, but their isn't a lot of documentation on what the methods need to do. (although you can gather a lot of info by looking at the other implementations).
Note, I'm currently trying to do this with Silverlight Toolkit Chart Control. But am evaluating Telerik and Software FX as well.
I did get this to work by creating my own Axis subclass.