my column chart is not using all space available. The columns could be thicker, but when I change the pointWidth to a higher value, the columns get thicker, but instead of occupying more of the available white space, they just start to overlap.
Here is the chart.
Thanks for any hints.
Two things:
update Highcharts to latest version if possible (2.3.5)
your series contains three points, [ value, value, NaN] - you probably have an extra end line "\n" in your CSV. Add checking if parseFloat isn't returning NaN (use isNaN() function).
If you change pointWidth you should also care about groupPadding / pointPadding which define space betweet points/groups.
http://api.highcharts.com/highcharts#plotOptions.column.pointPadding
http://api.highcharts.com/highcharts#plotOptions.column.groupPadding
Related
I have a line chart with a limited Y axis (1-5). There are six different lines represented on the chart (3 each from two different users: measuring feeling 1, feeling 2 and feeling 3 from 1-5).
When users enter the same value over time (for instance, ranking feelings 1 and 2 as 5 for several weeks), the two lines completely overlap and you can only see one.
Is there a way I can offset a particular line by say, a couple pixels up and to the right so if there are two different lines representing same values over time, I can see both at once?
Using pointPlacement it is possible to slightly offset each series, so points with the same values do not overlap each other. The tooltip will still work as if points would overlap, so setting shared to true should help.
Example: https://jsfiddle.net/BlackLabel/3mhyojtd/1/
Another option that will allow not shared tooltip would be to use scatter type series with lineWidth set to 2, to imitate line type series.
Example with scatter series: https://jsfiddle.net/BlackLabel/r6pL4f2j/
From the picture above you can see the problem with overlapping columns.
I've tried with groupPadding but it does seem to work.
I prepared a jsffidle http://jsfiddle.net/cr1t/r7yyN/
Any Ideas?
When you set pointWidth, then groupPadding is omitted. Remove pointWidth and you will get proper result: http://jsfiddle.net/r7yyN/1/
Also, you have different groupPadding for series, which may cause overlaping.
This is not DUPLICATED!!! Sorry if yes.
I want to increase the space between columns independently to the pointWidth property and the #container width. Please this couple of pictures
and the fiddle is here
How can I edit this space/margin/padding ?
In your current chart, the number of bars you have, combined with the fixed pointWidth of 14 (pixels) you have set on each series, means that the groupPadding setting which you have not set and therefore defaults to 0.2 (x-axis units) is squashing the bar pairs together, overriding any increase you try to set to pointPadding.
If you reduce groupPadding, like so, the pairs will come apart accordingly. If your number or bars and/or chart width are variable, and you want to fix the ratio of the gaps between points and groups, then set your pointPadding and groupPadding as required, and remove the fixed pointWidths you have specified so that the bar widths take up the slack, like this.
You can use pointRange / groupPadding / pointPadding, skipping pointWidth.
http://api.highcharts.com/highcharts
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/
We are facing issue in wind rose chart when displaying real data. The data values range from very small (100) to very large (1000000000). On rendering the data set in wind rose chart, as the max length has to be set according to the highest value, the smaller values are not visible.
As a workaround to this, we planned to restrict the length of the bars/ spikes in the chart to say 10px so that all the values are visible. But couldn't find a way to do so. In bar chart we can use minPointLength property.
Can anyone provide any help on how to restrict the length of bars or any other workaround for this?
Thanks in advance.
Use type: 'logarithmic' axis, see: http://jsfiddle.net/3pEbJ/
Thanks a lot. It worked in our case. Would like to add few points for the modifications required for using this property.
1. On using “type: 'logarithmic'” property, if the data series contains value 0 for any value, JavaScript will throw error #10 ‘Can't plot zero or subzero values on a logarithmic axis’. To avoid this error you need to change the zero value to some non-zero value. This scenario occurs for stacked series.
2. Providing non-zero value will render that value in tooltip also. So as a workaround, we can provide the non-zero value like 0.00001. This way it will display value 0 in the tooltip for that series and also the corresponding bar would be very small.