I have a use case where the client needs to see the previous date ranges stats overlaid on the current date range. This will allow them to easily compare current vs previous performance.
To do this I'm adding another series to the charts and retrieving the previous periods data. Previously, we then set the tooltip for the X value which was the current dates. I'm now needing to modify the tooltip to show the correct date value for each series such that a previous periods data point tooltip might look like:
12/1 : $4432.00
and the current periods data point:
1/1 : $21321.12
However it seems the charts are only capable of a single tooltip formatter instead of a per series formatter. If I continue to use the X axes label it will display the incorrect date on the previous periods data points. Using the above example would come out with 1/1 for the previous point:
1/1 : $4432.00
Is there a method by which I can set a tooltip format per series? Is there also any means by which we can modify and extend the underlying Highcharts?
I've found one solution for this function. Create a new XAxis and assign it to the Series.
XAxis xAxis = new XAxis();
xAxis.setCategories(categories);
xAxis.setOpposite(true);
configuration.addxAxis(xAxis);
series.setxAxis(1);
By adding the new XAxis the tooltip formatter can you use the same logic but receive different values depending on which axes the series is attached to.
I found setting the X axis by Integer a bit odd though. It should take the object imo but I suppose it needs to know which axis in the configuration's array to assign it to.
This solves the use case I have but won't be a solution if there are more than 2 axes to label.
Related
I created a chart visualising the cost of living in different cities and entered a line indicating the average. When integrating this sheet into the tooltip of my map, the line is not representing the average anymore but the actual cost of living for each city. I have been trying a lot but can't seem to figure it out. Thankful for any tip!
That's because the tooltip, triggered by the click/hover, is taking into consideration just a city at once, and so the average value is equal to the sum of that specific city: you're running average on just one city.
In order to compute the correct reference value you should create a calculated field like this using LOD:
{ FIXED : SUM([Cost Of Living])} / { FIXED : COUNTD([City])}
Then you could use that calculated field in a dual axis chart.
Doing so, since EXCLUDE acts before dimension filters, you will be able to preserve your average across City even though tooltip will trigger a filter.
Take a look at this simple example made with superstore and keep and eye on the red line (LOD v2) which relates to the calulated field above.
As you can see there's also a blue line which relates to the previous calculated field I wrote (LOD v1):
{ EXCLUDE [State] : AVG( { FIXED [State] : SUM([Sales])})}
Once we move to our main worksheet triggering the viz in tooltip, you'll see that the red value still keep the correct value calculated on all data, while the blue value is taking into consideration just data according to filter.
In fact FIXED is the only LOD calculus which act before the dimension filters and it's able to bypass the filtering triggered by the tooltip.
Here is an example of my code: https://jsfiddle.net/delux123/y9h46Le8/27/ where I have two series of data, referenced as ohlc and volume. I need them both displayed at one pane (as in example I provided) but they will need to have separate Y axises.
The data for volume series will always have values that are above the ohlc series and the ohlc series will not be visible because of this overlapping. In the example I provided, we can see how it's already overlapping for some points. Considering that in my data this will be the case for all points, that means my ohlc series will never be visible.
So what I wonder is, if there is a way where two different series will be placed on the same pane, but will have different range of Y axis?
This is just an example of one idea that I have: Since I need ohlc series to be in the main focus, maybe we can set min value of the ohlc series to always be above 30% of the pane and the max value of the current visible volume series can always be below the 30% of the pane. Something like limiting the min/max value of the series in the current pane:
I found something similar here: https://www.tradingview.com/script/A1cPrGLb-Example-Monte-Carlo-Simulation/ so that way will work as well. I wonder if this is feasible with highcharts?
What I need is to show a different valuesuffix for each chart type value based on a unique array for each series.
I have considered the answer in this question and created this jsfiddle.a
It will only work when the tooltip is displayed for one series at a time. If I set the series tooltip to be shareda, it will not work.
Any ideas?
For tooltip shared with multiple series, you need to loop the points like this in order for the tooltip to work.
Edited: Added valuePrefix
I have a simple column chart where the yAxis series data contains numeric strings in the millions and tens of millions. The chart therefore displays the graph numbers like this: "12.5M"(on the side of the grid) and in the points tooltip it is being displayed with a decimal point at the end. How do I make the data be shown in the thousands with commas? Will the chart be adjusted automatically to display more grid lines and raise the columns higher? Thanks a lot in advance.
I would have added an image, however it seems that that requires more reputation points. Sorry. Here's a link to it Screenshot
1) you can change the formatting of the axis labels by setting your own format with the formatter function
http://api.highcharts.com/highcharts#yAxis.labels.formatter
2) you can change the number of ticks by setting a tickInterval or tickPixel interval setting
http://api.highcharts.com/highcharts#yAxis.tickInterval
http://api.highcharts.com/highcharts#yAxis.tickPixelInterval
3) You can change how much extra space is added at the top/how many ticks there are, in part, by setting the maxPadding setting to 0
http://api.highcharts.com/highcharts#yAxis.maxPadding
When you have a small chart like the one you posted, Highcharts will often have trouble adapting its normal tick pattern, and you will often end up with just a min and max tick by default.
It's pretty easy to work these setting to get what you need though.
Just a simple answer needed, is there a simple way to compare a series on values rather than percentages? Something like "compare : 'values'" rather than "compare : 'percent'" or do I manually have to add data points for given time intervals? Thanks!
Yes, but the option is called value
From the plotOptions.series.compare documentation:
compare: String
Compare the values of the series against
the first value in the visible range. The y axis will show percentage
or absolute change depending on whether compare is set to "percent" or
"value". When this is applied to multiple series, it allows comparing
the development of the series against eachother. Defaults to
undefined.
The demos from the documentation: Setting compare to percent, value.