Hi I am using HighStock 1.2.4
I do have multiple series and separate yAxis for each series. I am calculating height and topPadding and creating stacked series.
Now, I am facing two problems.
I have used rotation with yAxis to rotate labels but its not rendering correctly.
Example: http://jsfiddle.net/mhardik/uZaWz/9/
I have also used rotation for X Axis labels, but the last series position is getting messed with X Axis Labels.
http://jsfiddle.net/mhardik/uZaWz/10/
1) I'm not sure why it's not rendering correctly, if you want to move a little to the left use x: property for title.
2) First, I think you need to set proper align for xAxis.labels (right). Then make higher chart to make sure you have enough space for a chart.
And jsFiddle: http://jsfiddle.net/Fusher/uZaWz/12/
Related
I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
I am using highchart to show bubble chart. Everything is working fine except in many cases there are lot of horizontal space(below min cirlce and above max cicle) and vertical space(left of lowest x and right of highest y). Because of this issue my chart sometimes seems very crowded even though there are some free space left in chart. I tried setting min/max of x/y axis but then it then clipped top/left circle. Is there any way i can instruct highchart to use all space in chart to draw bubbles.
I have created sample script at
`http://jsfiddle.net/ftghd9ny/1/`
In this demo you can see extra vertical space. X axis is showing fine. In some other cases there are extra space along x axis.
I'm trying to customize a Coreplot graph in many ways I can and the next thing I would like to do is place the X Axis Labels (one that is custom as well) at the bottom of the graph, independent of the X axis' position (whether it's scrolled up or down).
To make it clear, it is similar to giving the labels an offset value of something like 50.0. But offset is not the property I'm looking for since it fixes the labels location relative to the X axis.
Any way this can be done? Or do I have to skip the axisLabels property and place and layer or something manually at the bottom of the graph?
EDIT: Alright, I managed to place an axis on the bottom with CPTConstraints. But it's not on the bottommost. If a plot point is on those levels, the plot line overlaps the labels. I tired padding of the graph but of course, it moves the whole graph, hence the issue persists.
Thanks in advance
Make a second x-axis. Have the first one draw the axis line, tick marks, etc., as normal but no labels. Label the second one and set all of the line style properties to nil so it doesn't draw any of the lines.
Turns out that aside from the graph, the plotAreaFrame property of the CPTGrpah also has paddings. If you give more paddings to plotAreaFrame than that of the graph, the plot will be drawn in a smaller frame and the rest of the graph area will be for you to add what you want (i.e., a second Axis).
Big thanks to #Eric, for trying to answer Every single CorePlot question as soon as possible.
CorePlot does have a lot of customisation than I thought.
This Link is a similar example from highcharts.com which i'm working on. I'm trying to place the labels for plot bands on y axis. But as you can see the labels are overlapping on the chart which isn't that good. If i wanna color the labels with the same color of the corresponding plotbands, the label doesn't show up. Is there a way to place it completely outside without overlapping?
Thanks in advance.
A possible solution is to add right margin to the chart, and move the labels over.
Add a marginRight to the chart, and on each label, use x to determine its starting x position.
marginRight:110
and
x: 90 on each label.
http://jsfiddle.net/7xb1Lgx6/ the fiddle.
I think it's not possible to do it yet.
If you add labels to the plotbands it will overlap them.
You can align your labels but if you set x more than your chart width, it will not appear on your chart.
demo