I have a pie chart. As you can see items of the legend next to each other.
Is it possible to align the legend items in two columns?
Sorry for my English.
You can use legend with properly set property itemWidth. For example:
legend: {
itemWidth: 120
},
From Highcharts docs: itemWidth: NumberSince 2.0
The width for each legend item. This is useful in a horizontal layout with many items when you want the items to align vertically.
Related
HEATMAP
Take a look at the chart attached. I tried to set properties of legend for heatmap but nothing worked. Is there a way I can set this legend height according to chart height. I was able to change heatmap height but not the legend. Also, how can i reverse the legend numbers order in descending order?
this is what I used to display legend when creating chart, but its not showing legend numbers in descending order, neither does it changes the height to cover full map height.
You need to set proper symbolHeight for legend and disable reversed for color-axis.
colorAxis: {
...,
reversed: false
},
legend: {
...,
symbolHeight: 280
}
Live demo: https://jsfiddle.net/BlackLabel/2r0Lbt6d/
API Reference:
https://api.highcharts.com/highcharts/colorAxis
https://api.highcharts.com/highcharts/legend.symbolHeight
There is a way to configurate highcharts in order to display legend items as a tile? Or maybe just using the horizontal layout but aligning the items in columns?
At left is an example of how it looks now using the horizontal layout and at right is what I want (it's not a real screenshot but just something I made using paint)
Thanks in advance!
You can set itemWidth
legend: {
itemWidth: 80
}
http://jsfiddle.net/ntL7f/
I have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.
Snippet of plot options:
series: {
grouping:true,
groupPadding:0.12,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/
In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.
I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.
Please suggest if any other combination of options can help me achieve this.
-Thanks
Just to make it clear, you can use one of (not both):
pointWidth: forces Highcharts to draw bars with fixed width,
pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height
Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.
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
I'm trying to align columns to the left in my chart. By default they are in the middle.
I can't find anything about this in the API documentation.
Here is a jsFiddle test.
In the highcharts api, have you examined the group padding feature?
http://www.highcharts.com/ref/#plotOptions-column--groupPadding
plotOptions: {
series: {
groupPadding: 0
}
},
If the columns appear too wide when you set the groupPadding to 0,
you can still play with the pointPadding. http://www.highcharts.com/ref/#plotOptions-column--pointPadding
(If that doesn't fit your needs, I guess I'm a bit perplexed,
because I don't see how having chart columns aligned to the left,
then followed by a big blank space on the right, would make
for a well-designed chart...)
you can trying using the margin option http://www.highcharts.com/ref/#chart--margin
or the margin left option http://www.highcharts.com/ref/#chart--marginLeft
or the spacing left option http://www.highcharts.com/ref/#chart--spacingLeft