Highstock example: https://jsfiddle.net/1qz43heo/1/
spacingBottom: 0
Problem: When I add "spacingBottom: 0" the Y axis changes and the lines do not "fill out" the whole space anymore!? Why?
(spacingBottom when not set is 15: https://api.highcharts.com/highstock/chart.spacingBottom)
Related
I'm trying to create a custom pattern fill for highcharts.
It's a horizontal dashed line with alternating starting points from one row to another (the first start at 0,0 the second at 3,10 and so on).
I edited the Highcharts JSfiddle example replacing the custom pattern with the following (here you can find my "final" version) :
color: {
pattern: {
path: {
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19',
strokeWidth: 0.5
},
width: 22,
height: 20
}
}
The problem is the the two rows of lines have different width.
I can't find any parameter in the documentation to fix this.
I don't know if the problem is in my pattern definition or a highcharts bug.
Any thoughts?
The path as-is moves first to 0,0 and then 14,0, and finally 3,10:
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19'
You can change that to 0,1 and then 14,1, and then 3,11 and the lines are the same width:
d: 'M 0 1 H 8 M 14 1 H 22 M 3 11 H 19'
The lines starting at 0,0 are centred on the boundary meaning that half the line gets cut off, so just moving them all down by 1 ensures that the whole line is visible.
Updated Fiddle
Example plunk refereed to below.
I have a line chart where the Y axis is a percentage between 0 and 1. Sometimes my highest percentage is less than 1% sometimes its between 99 and 100%. It never makes sense to have more than 100% displayed on the legend.
The problem is if I set max: 1 and have data that is all below 0.1, the chart looks flat like in the second example. However, If I don't set max and the data is approaching 100%, then y axis will render ticks up to 125%.
How do let the legend autoscale, but cap the max value.
You have this in your y-axis:
yAxis: {
max: 1,
min: 0
}
If you instead go for this, it should be more understandable:
yAxis: {
min: 0,
endOnTick: false
}
To clarify, you had max: 1 and endOnTick: true (default), and according to the API:
If the endOnTick option is true, the max value might be rounded up.
See this updated Plunker for a demonstration.
The same goes for starting at 0%. You could remove min and set startOnTick: false.
I need to set the step between the display lines in Highcharts. I mean it -
200
150
100
50
0
In this y-case step = 50. How can i set this in HighCharts?
This found with the yAxis.tickInterval. For example:
yAxis: {
tickInterval: 50
}
http://jsfiddle.net/BYeBa/
yAxis: {
min: 0,
max: 75,
title: {
text: ''
}
I am not sure why I cannot set the max value of the y axis in this highchart. I don't want it to go over 75. None of the data I have populate even goes near the value of 75.
Why does it stay at 100?
This is caused by endOnTick. If you set
endOnTick:false
75 will be your max.
See http://jsfiddle.net/kzoon/BYeBa/4/
You can set tickInterval as 25.
http://api.highcharts.com/highcharts#yAxis.tickInterval
Can anybody give an example of drilldown chart that has min and max for the Y axis labels? Here is the jsfiddle of the example from the Highcharts website.
I have been trying to figure out how to set a min and max for the Y axis labels. So for example instead of starting at 0 i would like to start at 88.
To get the desired result - for example, start yAxis values at 88, you should use this settings:
new Highcharts.Chart({
....
yAxis: {
min: 88,
startOnTick: false // To prevent rounding of this value.
},
....
});
Hope this helps.