Is there a way to adjust the position of the upper Y-axis lables as shown below
Example
If you want to move xAxis.labels at the top of the chart, you need to set xAxis.opposite to true.
Demo:
https://jsfiddle.net/BlackLabel/zh1L5djk/
API Reference:
https://api.highcharts.com/highcharts/xAxis.opposite
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/
I am using Highcharts for one of my project. Everything is okay except I could not change line style('Solid','ShortDash','ShortDot','ShortDashDot','ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot','LongDashDotDot') of bottom grid line in x axis as shown in the attached image.
Because the line you highlighted is not a gridLine of yAxis and dash style does not apply to it. In fact it covers the bottom-most grid line. Disable it by setting its width to 0.
API Reference:
http://api.highcharts.com/highcharts/xAxis.lineWidth
http://api.highcharts.com/highcharts/yAxis.gridLineDashStyle
Example:
http://jsfiddle.net/mnp6xa57/
In My Code there is requirement when user click on a Bar of a series the CheckBox Style of the Series should be changed to none.But when i do that my Chart Width is increasing. IS there any way we can keep the chart width fix irrespective of legend table width.
Thanks
Akshay
This Can be done
GetLegend().SetResizeChart(false);
GetLegend().SetCustomPosition(true);
GetLegend().SetPositionUnits(muPercent);
GetLegend().SetLeftPercent(83);
GetLegend().SetTopPercent(10);
Set your legend Alignment in bottom for Avoiding width increment of chart as below.
Chart.GetLegend().SetAlignment(laBottom);
if you want custom position of legend (Right side of chart)then you can do as below.
m_Chart1.GetLegend().SetCustomPosition(TRUE);
m_Chart1.GetLegend().SetPositionUnits(muPercent);
m_Chart1.GetLegend().SetTopPercent(20);
long leftmargin = 80.0;
m_Chart1.GetLegend().SetLeftPercent(leftmargin );
m_Chart1.GetPanel().SetMarginRight(100-leftmargin+1);//for avoiding overlapping of legend and chart
Also you can finetune your legend and chart by modifying above value
Is it possible to show the x-axis and corresponding labels on top of the graph instead of the bottom?
Inverting or reversing the data is not what I am looking for design wise.
Yes. In your xAxis properties, set 'opposite:true'
http://api.highcharts.com/highcharts#xAxis.opposite
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