I am using highchart and exporting that to PDF from BIRT tool so when exported the Bars inside graph is overlapping, actually in HTML the gap between bars is nearly an inch. can someone help me out in resolving this issue
Got the answer. Just need to add in plot options
series: {
pointPadding: 0.1, //single bar
groupPadding: 0, //for group of bars
}
Related
I’m using 3D Highcharts. Data labels works fine for 2D charts but I’m facing issue with data label positioning after 3D projection.I’ve attached the screenshot and code snippet here for your reference.
Expected behaviour:
Data labels should be properly positioned appropriate to x-axis values.It should not go out of chart for extremely low values of series data.
Actual behaviour:
options3d = {
enabled: true,
alpha: 15,
beta: 15,
depth: 40
};
Description:
Consider the above screenshot having series data=[1,37,790,1962] and [4,2130,342,1302].Placement of datalabels for data ‘1’ and ‘1302’ are not aligned properly.We can achieve proper alignment of datalabels by changing alpha and beta values.But I’m looking for a proper fix that will allow me to achieve this.Thanks in advance.
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
I am generating Highcharts column charts with many columns. The chart is very wide, necessitating scrolling (via the CSS overflow option on the Highcharts div). Is there a way for the Y axis to always be visible, even when one has scrolled to the right? I am aware that Highstock has an option for a scrollbar, but I'm only using Highcharts. Is there anything comparable there?
Thanks in advance.
You can enable scrollbar in highcharts including highstock.js. but using highcharts. see example: http://jsfiddle.net/xVyLr/
xAxis: {
max:5
},
scrollbar: {
enabled:true
},
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.
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