In Highcharts, how do we propertly place multi-pyramid charts? - highcharts

For example, there are 4 pyramid, I want to place them like 2 * 2. So their centers should be ['25%','25%'], ['75%','25%'], ['25%','75%'],['75%','75%'],
you can see the second row of pyramids fly to the top of first row.
then I came out with an idea that "why not try second row centers with ['25%','-25%', '75%','-25%']?"
Yeah! It works! Wait! Where are my datalabels?
So, I'm wondering how do we place them propertly without losing datalabels?
Here is a fiddle:
https://jsfiddle.net/scottszb1987/wyqxLkxh/

Related

highcharts - proximate legend items incorrectly assigned (edge case)

This is probably very edge case scenario, but I wanted to know if there is any workaround.
I noticed that when legend align set to right and layout is proximate and when last data points close to each other and bottom legend item has multiple lines in it, it confuses legend order.
Please take a look into this example and the image below:
I'm trying to have legend items ordered by their last value like test1,test2, test3, test longer text4, but instead got two last items mixed up. And it happens only when two last data points close to each other. Other times it worked perfectly.
I've tried to play around with legend.maxHeight, but unfortunately it has no effect.
I appreciate any help!

Scrollable Line Chart

Am trying to use the ios-charts library based off the MPAndroidCharts; however am having some trouble getting a scrollable graph to work.
By scrollable I mean that I try to show only a portion of the data of the line and that you can scroll horizontally to see more results. E.g I have 30 results and I only show 10 at a time and then scroll horizontally to see more.
Have come up with an approximation by using the method
[self.containerView setVisibleXRangeWithMinXRange:24.0f maxXRange:24.0f];
However this seems to make the scrolling kind of jittery as it keeps on redrawing.
Am looking for an ios-charts example and clarification on methods to see whether I am on the right track or not.
Similar to your question:
https://github.com/danielgindi/ios-charts/issues/267
Quote:
I was able to achieve this after playing with it a bit. It is actually pretty straight forward.
chart.data = data; // This is the MAIN reason, data for the chart has to be set first before the next 2 steps otherwise they will just get ignored like nothing has been set.
// set the max x data point to 10, which is what i wanted showing only 10 data points for the line or bar chart, from 100 data points.
[chart setVisibleXRangeMaximum:10];
// move the chart view to 90 index of X, which is the last 10 entries I want to see. and it works as expected.
[chart moveViewToX:90];
Other helpful ones:
https://github.com/danielgindi/ios-charts/issues/226
https://github.com/danielgindi/ios-charts/issues/258

how to center highcharts at the middle

I have two axis in highcharts and I dont specify the range for either. Please see graph.
For some reason, series one from 201 to 206 is taking up the whole chart while series 2 which is only -2k to 2k is being squeezed to the bottom, thereby extending the range all the way to 30k which is totally unnecessary. I think highcharts by nature wants to not have any overlap but I want that. What I'd like is for the right series to be centered, in fact I want the right axis to be centered at 0 always and can grow unrestricted in either direction. I can't hardcode any of these since I have no idea what the values could be. So Series 1 on the left is ok, but I want the value 0 for series 2 to always start at the middle of the chart. Any way to achieve that?
Try to set alignTicks as false.

Highcharts :: Need to split y-axis from primary body of chart. Can I display this axis separately from the Highchart?

I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.

Highcharts highstocks - candlestick graph has last value partially cut

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.

Resources