While using Highcharts i come across the following problem after implementing my navigator.
In specific zoom areas many tick labels appear on xAxis creating a mess.
Example in this image.
But when i zoom out a bit for example the xAxis labels automatically transform to:
Is there a way to have a specific amount of ticks each time to avoid this behaviour?
Related
We are building an iOS app using HighCharts components. Defined HIColumn for Bar Chart in XAxis with couple of HISpline (AreaChart) overlay on yAxis that can be toggled. When a user is zoomed in to a specific xAxis period, upon adding the spline, the Chart looses the Zoom and redraw itself. Is it possible to add a spline at runtime without loosing the zoom? These are the things I tried:
Set Min/Max on XAxis. How can we get the current Min/Max/tickInterval when the user zoom in on the xAxis.
Instead of dynamically adding the spline, tried making it visible true/false but still the chart refresh and lose the zoom.
Any help is appreciated.
Thanks!
I'm using highcharts and trying to add labels to the grid lines of a polar chart, however, I can only add labels to the first axis (which is the y-axis in the cartesian coordinate system).
Polar charts are not well covered (as well as labels on grids) in the highcharts docs. My current approach is placing the labels manually on the correct positions, which will get cumbersome due to dynamic number of categories and sizes of my chart. Additionally, exporting the chart will not support labels anymore.
Background: Let's assume I am selling tickets for clubbing from Monday to Friday (no weekends, bad choice) for the clubs Green, Black, and Blue. Now, I want to know which club performed best on each day, and also how many tickets are sold in total. Therefore, I'd like to apply different scalings to each axis as attached (manually manipulated). I'm currently normalizing the ticket sales for each day to 0…1 which does the job for comparing each single day, but I can't apply the different labels to the axis.
One way might be to add more panes (with startAngle correction) and yAxes with different scales, so dataLabels are showing as in your image.
Example: http://jsfiddle.net/6b9m7Lvb/
Problem - each yAxis can have only a single pane, each series can have only a single yAxis, so there is one scale for a series - no matter what category.
Another way could be to do the same, but have all yAxes linked to each other, so scale is the same for all. Next it is possible to change axis labels and tooltip display, to match your image.
Example: http://jsfiddle.net/6b9m7Lvb/1/
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/
In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.
I want to make a multiple plots with the x-axis aligned so that we can compare two set of data. I want it to look like this
https://stackoverflow.com/a/11796553/229075
In my case there are some addition requirement that some of the plot are lines and some are bar. So the default scale does not align even if the data range are the same.
I found some good suggestion about "stacking" the charts. It is a little bit complicated but a promising way to try.
https://stackoverflow.com/a/12179023/229075
However I also have other use case that may push the envelop of simple stacking. For example, I'd like to do scatter plot matrix sometime when both x-axis and y-axis have to align like this
http://www.statmethods.net/graphs/images/spmatrix3.png
Rather than putting many chart in one Highchart, this may requires have many separate charts but have better control in how the axis is layout.
If you want to use one one chart, you can use linkedTo option to connect axis.
If you want more simple charts, you can manage to connect axis using event afterSetExtremes, where you can call setExtremes() for another chart.