Highcharts space usage - javascript

I have the following problem. If no max value is defined Highcharts always adds space at the end of the bar. To illustrate it I've attached a image. The blue area is the div the chart is inside and I want the bars with 100% end on the end of the blue area. I'm aware of it that I can achive this by setting max:1 on the axis but I'm looking for a dynamic approach since when I'm defining max it is fixed and if the maximum value in the Chart is 80% I again end up with unused space.
Thanks Sebastian

You should set max as 100 for yAxis, not 1.
EDIT:
set maxPadding as 0 and endOnTick as true
http://jsfiddle.net/Km8CK/4/
http://api.highcharts.com/highcharts#xAxis.maxPadding
http://api.highcharts.com/highcharts#xAxis.endOnTick

Set your maxPadding to 0, and endOnTick to false.
example: http://jsfiddle.net/Km8CK/6/
maxPadding:0,
endOnTick:false,

Related

dataLabels overlap bar line chart HighCharts

Only the biggest number on bar char overlap the bar line
I tried to add maxPadding for the xAxis, but it looks like too bad for small numbers.
Another way i tried
crop: false, allowOverlap: true, overflow: 'allow',
but there anothers problems with text cut appears
You can set the higher axis max property or try to adjust the axis left and width properties. Take a look at the example in the following demo:
Demo:
https://jsfiddle.net/BlackLabel/jvo1sth2/
API Reference:
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.left
https://api.highcharts.com/highcharts/yAxis.width

Make lines thicker in bar chart

I have this chart:
I have 2 issues:
How can I make the bars thicker and add space between them because they are so small that they blend in each other.
As you can see in the photo, the highest value is 3 but how can I stop the chart after that so there is no blank space like in the photo between 3 and 4.
Thank you very much!
Reduce pointPadding and groupPadding properties or increase chart's height.
Set yAxis.maxPadding to 0:
yAxis: {
...,
maxPadding: 0
}
Live demo: http://jsfiddle.net/BlackLabel/s3c7yz2w/
API Reference:
https://api.highcharts.com/highstock/series.column.pointPadding
https://api.highcharts.com/highstock/series.column.groupPadding
https://api.highcharts.com/highstock/chart.height
https://api.highcharts.com/highstock/yAxis.maxPadding

Fix space between columns and align labels on Highcharts

I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.
This is my fiddle: https://jsfiddle.net/q3atxr4c/1/.
I added pointPadding, borderWidth and groupPadding. None of these are working.
Is there a way for me to reduce space between the columns?
Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.
I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!
The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.
API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.grouping
Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping

Set second axis in proportion of first axis

I have a chart which contains two series, and each of them has its own yAxis. I need to automatically set the second axis maximum to 13.5% of the first axis maximum. For example, if the first axis goes from 0 to 100, then I want the second axis to go from 0 to 13.5 (No matter the second series value).
The only way I found to achieve this is to calculate the max of the first series, and then affect it to the max of the second axis. But this is not what I really want. See this JSFiddle.
My fiddle seems to work, but in reality, I am not calculating the second axis maximum in a good way, as I refer to the first series maximum and not the first axis maximum.
Does anyone knows a general way to set the max of an axis accordingly to the max of another axis ?
The linkedTo attribute from Highcharts axis is close to what I want, but I need to add a coefficient. I don't know how to proceed.
There is no default API function in Highcharts that would allow that.
If you want to get percentage of max of created axis, then you can get it in load event of chart (API: http://api.highcharts.com/highcharts#chart.events.load )or in callback (as in demo below). Next you will need to update second axis' max.
Example: http://jsfiddle.net/cg0c5tkd/
function(chart){
chart.yAxis[1].update({max: chart.yAxis[0].getExtremes().max * 0.135});
}

Declaring location of highchart bars on a chart?

I have highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks
Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.

Categories