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?
Related
I am trying to illustrate the twist in a sail using a chart, showing the effect of various twist amounts.
However, try as I might, I cannot swap the x and y axis! The cells B3:B8 are the height going up the sail, where the measurements were taken, and should be the y-axis.
The columns C:V are series, which are different sets of measurements taken at the various heights up the sail, with the degree of twist as the series' values. This is what I have:
I've also tried to create the chart from Transpose()d data (swapped rows <-> cols) but ended up with the same chart! The "Height" is supposed to be the Y-axis, and the values ("Degrees") the X-axis.
I must be missing something obvious, but Google is not my friend today. I have created a sample Spreadsheet here if anyone can help. MTIA.
Currently it is not possible to define the Y-Axis to a specific range for Smooth Line Chart, in fact, the only way this can be defined is by using Bar Chart.
As a workaround, you can use Bar Chart to define the Y-Axis like this:
Please note that it only looks best when displaying one or two series, the bars would look squished when more series are added.
As for the original intention of defining Y-axis for Line Charts, or a completely new type of chart, you can file a feature idea request here:
How To Submit a Feature Idea Request
Google Workspace Feature Idea Request Link
I'm trying to put together a combo chart that will use time values for the x-axis as well as the line series and combine that with integer values for the bar chart portion.
The problem is that because my times are between 00:02:00 and 01:30:00, the bar graph's values of 1-15 dwarf the time values.
Is there a way to display the bar chart with a separate scale so 4 and 00:04:00 look reasonably close?
I am using HighStock for comparative analysis, where it shows same number of series during different time periods, as shown in this fiddle.
It has multiple x and y axes. when I move mouse over the chart, it shows series wit value at mouse current location.
Problem:
Problem in this chart is, tooltip do not show values of all series, but a few and those series change in tooltip window. I want tooltip to show all series with corresponding or nearest point value at mouse location.
Another problem is with navigator, navigator is showing only dates corresponding to first x-axis it should show dates of all axes, stacked one above the other(like in chart),
Moreover, when I minimize the navigator window, it shorten only first x-axis but not all, I want it to shorten all x-axes. The said issue can be observed in following image.
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.
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.