I have a bar chart with one group of five items. Strangely, the distance between the bars within the same group is different. I tried out almost all imaginable settings as on the references list, but in vain.
Here is the graph.
The PlotOptions code is this:
plotOptions:
{
series:
{
borderWidth: 0,
shadow: false,
pointWidth: 10
}
},
The problem is with pointWidth property - your chart is to small for that value, remove that or change to something like ~7.
Related
On bar and column charts, how do you control the series overlap in highcharts? What is the properties name?
In powerpoint this is how I would control the gap between the inside of the bars:
You need to use pointPadding property. Also groupPadding can also be useful for you.
plotOptions: {
series: {
pointPadding: 0.2
}
}
Live demo: http://jsfiddle.net/BlackLabel/782qwgnr/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
HIGH CHARTS
Please look at JSFIDDLE. Here the bars overlap each other. How to prevent this by resizing the bar width dynamically.
If happens because you set bar width with fixed value. If you want bars to take all available place for width, instead of using pointWidth, set pointPadding to 0, groupPadding to 0 and borderWidth to 0.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth
Example:
http://jsfiddle.net/yek6g5vy/
If possible remove container inline css height.
Fiddle Demo
Or you can use scrollbar using highstock.js
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
allowDecimals: false,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Fiddle demo
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
i have a chart used grouped categories highcharts, i have succesfull make a charts but i got a bit problem.
example charts:Fiddle here
it is possible to remove space / or change space between column which have same parent, so it will be near each other ?
in that example :
apple, banana, orange = group as fruit
carrot, potato, tomato = group as vegetable
cod, salmon, tuna = group as fish
i wanted :
between apple, banana, orange the column is near
and between orange - carrot is still have space.
i have tried to change on style but i still can't figure it out.
thanks
You can use these options under plotOptions inside and verticalAlign to show lables at the bottom.
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'bottom',
formatter: function() {
return this.point.name;
}
},
}
},
I had to change the structure of the series to make it easy to display:
series: [{name:'Fruits',
data: [{y:4, name:'Apple'}, {y:14, name:'Banana'},{y:18, name:'Orange'}]
}, {name:'Vegetable',
data: [{y:5, name:'Carrot'}, {y:6, name:'Potato'}, {y:5, name:'Tomato'}]
}, {name:'Fish',
data: [{y:14, name:'Cod'}, {y:15, name:'Salmon'} ,{y:18, name:'Tuna'}]
}]
});
example jsfiddle
i have figure it out too with diffrent style [jsfiddle][1]
[1]: http://jsfiddle.net/rikad/gptrz8Lh/
I have a highstock chart with many series. I placed the legend with series names below the chart. The problem is that I cannot know in advance which is the height of the legend, and sometimes it happens to be soo large that it overwrites the graph above.
Is it possible to adapt the size of the graph to the size of the legend in javascript code? Best solution for me would be to keep fixed the size of the graph and enlarge the height of enclosing element.
edit:
a jsfiddle which resembles my situation: http://jsfiddle.net/KfWDD/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
legend: {
enabled: true,
},
rangeSelector: {
selected: 1
},
series: [{
name: 'ADBE',
data: ADBE
}, {
name: 'MSFT',
data: MSFT
}]
});
I would like to have the legend below the navigator. I can obtain this by fixing some margins and offsets in the elements, but then the layout breaks if the legend becomes too tall.
You can set maxHeight for the legend, and add fixed margin to make some space for that legend.