i want to reduce the height of the highchart .Please the see the image below.actually i need my chart from -0.5 to 3 yaxis .can you help to reduce?
Try something like this:
yAxis: {
min: 0.5,
max: 3.0,
startOnTick: false
},
Try to set:
maxPadding: 0
Reference.
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/
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
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/
I'm trying to display a solid gauge with a "strange" max value, that is 96 (hours).
I'read that max and min value are elaborated by highcharts to set ticks, ranges etc but I don't understand why I can't display such a value or even other rounded values like 90 below 100.
Any idea?
The problem may be that the chart is generating a default tick interval e.g. 10, which adds up to 100.
You may be able to get what you want by specifying a tickerInterval which divides into 96 (e.g. 8).
yAxis: {
min: 0,
max: 96,
tickInterval:8,
http://jsfiddle.net/Vn4My/
You can use any max value, only thing is you should divide it by 1000 to get the tickInterval value, for example:
yAxis: {
min: 0,
max:96,
tickInterval:(96/1000),
},
Working example: http://jsfiddle.net/NareshChennuri/whuu5qbt/
To get the exact custom max value :
tickPositioner: function() {
return [this.min, this.max];
},
min: 0,
max: 6924,
refer this issue on github
Try This I am also facing the same issue but I resolve that issue this solution may be useful for you.
yAxis: {
min: minData,
max: maxData,
tickPositions: [minData, maxData]
},
Add tickPositions: [minData, maxData];
pls check similar example Example
Ref reference click here
I hope this is enough.
Thanks,
PVS