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
Related
I'm trying to change the size of a column in a heatmap. I can use the colsize to set the width of the border, but i'd like to change the width of the entire column. Is this possible?
Here's a JS fiddle example.
http://jsfiddle.net/8b9410om/
The Total column I would like to change to the same size at the border that you can see around it
You can use endOnTick and pointPlacement properties:
xAxis: {
...,
max: 1.25,
endOnTick: false
},
series: [...,
{
colsize: 0.25,
pointPlacement: -1.5,
...
}
]
Live demo: http://jsfiddle.net/BlackLabel/t3r12hnk/
API Reference:
https://api.highcharts.com/highcharts/series.heatmap.pointPlacement
https://api.highcharts.com/highcharts/xAxis.max
I'm new with highcharts and what I'm trying to achieve is to have fixed bar height/width and fixed spacing between bars in highcharts. Either there are 20 bars or only 3 of them, the bar height/width and space between bars should remain the same. And the highchart itself should be with fixed height, f.e. 300px. I'm not sure this is doable, but here is an example of what I'm trying to achieve:
https://imgur.com/BmyZjvb
https://imgur.com/OMiZZ2R
Yes, you need to only set fixed axis extremes:
xAxis: {
min: 0,
max: 4
},
yAxis: {
min: 0,
max: 100
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5011/
API Reference:
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/xAxis.max
I don't know if there is a better solution, but this is one solution:
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', '', '', '']
},
series: [
{
data: [5, 3, 4, 0, 0, 0]
}
],
http://jsfiddle.net/aabramya/jfdv3z65/7/
I have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis.
Now i want to sync the width of the xAxis to keep both charts underneath each other.
When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right.
How can I get draw both chart-areas with the same dimensions?
Here is a fiddle with a small example: Fiddle Fiddle
Best
MrLight
You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.
Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
width: '90%',
left: '8%',
// Categories for the charts
},
yAxis: [{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple Consumption' // Title for the yAxis
},
left: '7%',
offset: 0
},
{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple12 Consumption' // Title for the yAxis
},
offset: 0
}
],
I need to align table with highcharts, but chart has irregular padding on the edges, it's based on percentage, I guess.
I would like 30 to stick to the left edge of chart (close to 3) or set it distance manually in pixels. How can I do that in highcharts?
Based on #SebastianBochan suggestions, this is complete solution
xAxis:
startOnTick: true
endOnTick: true
minPadding: 0
maxPadding: 0
Try something like this:
yAxis: {
offset: -15
},
Check this fiddle: http://jsfiddle.net/jcxfhkht/
Here is the chart I'm using.
How do I change the chart to go low to high? Basically just horizontally flip it. The values need to be changed to go from low to high, too.
You can flip it by reversed axis parameter.
xAxis: {
reversed:true,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
}
http://jsfiddle.net/M4hML/6/