I am looking for a setting in Highcharts/stock that would allow me to apply a different format to displayed values of data, but not to the actual data as it is loaded into the series data. For example, we would like to plot y-axis data with precision up to 16 significant digits, and likewise, time values that use 6-8 sig figs. But that's not the precision we would like displayed in the tooltips, or other labels. However I am unable to find a way to format it without affecting both what is plotted and what is displayed. Here is an example of why this is a problem: let's say we have data points taken at .0001234s, .0001244s, .0001254s, and .0001264s, but we want to format the display of the time to ".0001" for all 4 data points. If we format it, then the "plotted" data ends up looking like it occurred at the same time-stamp, thus producing a stair-step look to our waveform.
I have looked at the custom functions that I can create to override tooltip display, but it doesn't appear that there is an easy way to make that very generic so that I can apply to all of the various chart instantiations (we use lots of different chart types), and that only covers tooltips; X-axis labels and Y-axis labels would also need separate functions for overriding those display values; there's possibly other places I haven't thought where the display might be affected as well. Is there any single, centralized place where the data points display value or format can be changed?
Example of stair-step appearance:
TIA
If you want to display various numbers (axis labels, tooltip, etc.) with various number of decimal places, you can use Highcharts.numberFormat function.
API Reference:
https://api.highcharts.com/class-reference/Highcharts#numberFormat
Example:
http://jsfiddle.net/eg0vepgq/
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.
I'd like to use highstock to compare two different time ranges together.
For example, for two data sets, one that shows the max temp for each day in Jan and the other one for Feb (for example), I'd like them to be shown one above the other, with the x-axis being the "same" one for both.
I can't do it with categories, because the data is being fed automatically, so each data point has its own time, so the x-axis is datetime.
I wanted to know if it was possible to simply have two graphs overlapping, with one graph having the normal x-axis at the bottom, and the other one having on top of the graph, so even when the data is for different times, it's shown overlapping. I can't find this problem anywhere.
Found the answer on this thread. Hope it helps!
Overlay 2 series of data of different length with highcharts
Essential Chart can be used with different date ranges with multiple axes. example source
The community license provides the whole suite of products for free if you qualify.
Note: I work for Syncfusion.
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.
I have an area chart (and a percent-area chart) that uses timeseries data for the x-axis. The timeseries is missing some data points and I would like the functionality to be that of connectNulls:false.
Is there another HighCharts option or a way to extend HighCharts to add an option for this functionality?
I have looked at the docs and browsed the questions here on StackOverflow and Googled for it, but the solution that I have found is to use connectNulls:false and to insert NULL values for the missing data points, but inserting the missing data points with null values would be cumbersome in my situation and I would have to replicate it in a few places.
I would imagine that it would be possible since in the instances that there is a missing data point, HighCharts will maintain the x-axis spacing. All I would want is addition to noticing the missing data point and inserting the appropriate spacing to also use a y-axis value of 0/inset a NULL/the equivalent.
Thank you all for your time and assistance.
Hi am using high charts in my website and they are just awesome.I wold like to know whether there is any option to include variance in graph instead of the original values like the one in below snip.
instead of displaying the values of each bars i would like to display the difference between two.Is this possible?Thanks in advance
You need to enabled dataLabels for one series, and disable for second one. Then in dataLabels.formatter you need to compare values, and return value you want.