score:2
Accepted answer
I figure it out. Better way to fix this issue is use tickinterval.
Here is sample http://jsfiddle.net/SdTcU/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: ''
},
colors: ['#c42525','#8bbc21'],
xAxis: {
categories: [
'07:00:00','07:15:00','07:30:00','07:45:00','08:00:00','08:15:00','08:30:00','08:45:00','09:00:00','09:15:00','09:30:00','09:45:00','10:00:00','10:15:00','10:30:00','10:45:00','11:00:00','11:15:00','11:30:00','11:45:00','12:00:00','12:15:00','12:30:00','12:45:00','13:00:00','13:15:00','13:30:00','13:45:00','14:00:00','14:15:00','14:30:00','14:45:00','15:00:00','15:15:00','15:30:00','15:45:00','16:00:00','16:15:00','16:30:00','16:45:00','17:00:00','17:15:00','17:30:00','17:45:00','18:00:00','18:15:00','18:30:00','18:45:00','19:00:00','19:15:00','19:30:00','19:45:00','20:00:00','20:15:00','20:30:00','20:45:00','21:00:00','21:15:00','21:30:00','21:45:00','22:00:00','22:15:00','22:30:00','22:45:00','23:00:00','23:15:00'
],
labels: {
step: 4,
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{ // Primary yAxis
gridLineWidth: 1,
tickInterval:10750, //get max value from highest area and divide it by 4
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: '1',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
tickInterval:20, //set ticks to 20
min: 0,
max: 100,
title: {
text: '%',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}%',
style: {
color: '#4572A7'
}
},
opposite: true
}],
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '1',
data: [
null, null, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000,
35000, 33000, 31000, 29000, 27000, 25000,
24000, 23000, 22000, 21000, 20000,
null, null, 43000, 41000, 39000, 37000,
24000, 23000, 22000, 21000, 20000,
24000, 23000, 22000, 21000, 20000
]
}, {
name: '2',
data: [
1, null, null, null, null, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826,
100, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826,
1000, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826
]
},
{
name: '%',
color: '#4572A7',
type: 'spline',
yAxis: 1,
data: [80,70,78,86,64,51,58,88,88,100,100,95,68,91,92,93,94,85,100]
}
]
});
});
score:4
You may also use a combination of the solutions above (worked for me):
alignTicks: false (chart)
max:100 (on % axis)
gridLineWidth: 0 (on second Y axis)
score:25
The problem you're having is that highcharts is trying to align the ticks. There are two ways of handling this problem with the current data set:
max: 100
changes to
max: 75
or, you need to set alignTicks as false
chart: {
type: 'area',
alignTicks: false
}
Source: stackoverflow.com
Related Query
- HighCharts - two Y-axis, one with max value
- My Highcharts graph with multiple axis ignores the max value I set for the first yaxis
- min and max axis value not respected in HighCharts chart with a logarithmic axis
- Highcharts calculated max value not working with 2+ Y axis
- highcharts - removing decimal places on Y axis with only one point
- Difference between highcharts and highstock during real time trace and xAxis with max value
- How can I update two highcharts with one dropdown menu?
- Highchart Axis with only min and max series value
- Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?
- Highcharts line chart all points disappear when have more than one points with same X Axis
- highcharts x-axis not showing with series of just one value
- Bar chart in High chart for indication of value with two colors in each bar where one color is always kept fixed
- move one vertical line with mouse over and find intersection point with two highcharts
- Define yAxis value with two different yAxis scale highcharts
- HighCharts y-Axis set min max with input field on rendered graph axis
- How to get the axis value with respect to the cross hair in highcharts
- Highcharts series zone not working with UTC date value in x axis
- Compare one month of two year with Highcharts
- Highcharts Chart with Two Axis Not Scaling Correctly
- Highcharts issue with max value (100) - React
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- How can I get the max value of a y axis at highcharts?
- how do I get two highcharts on one page?
- Highcharts - How to start x axis from an arbitrary value
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts - with datetime axis labels overlap
- HIghcharts 4 solid gauge max value
- Highcharts blank chart with x and y axis
- Highcharts label format with tickPositioner in a datetime x Axis
- Highchart axis max with multiple axes
More Query from same tag
- Implements Time series chart Highcharts in Angular 4
- ObHighchartsBundle: custom and set correctly xAxis with datetime and interval from DQL queries
- Highcharts not rendering in IE 11
- Sending a value from html to controller in angularjs. Issue with scope?
- How to modiffy Highchart size with slide effect
- Highcharts how do i keep space between series the same but increase space between categories?
- Highchart Gantt remove Y Axis label
- Highcharts Datetime X-Axis invalid date
- Angular adding single quotes and variable to the component.html not reading the variable and quotes
- How to create a new Highstock chart with new Highchart and not jquery?
- How can I set the units on multiple axis on Highcharts
- Highcharts Line Chart - Hyperlink on a data point
- HighStock with Django: help me render
- Highcharts - Stacked column data series
- How to set new data then reverse to original data in Highcharts?
- Highcharts range selector date formats from C#
- R-highcharter combine tooltips
- Get point by ID from highchart with multiple series
- JSON data from URL
- Highcharts - Changing color of text if not enough room on bar graph
- Chart not exporting to XLS File - Highcharts
- Display marker or images inside bars of barchart in Highcharts
- Highcharts - connect points with a line in scatter plot on hover
- Alternate for highcharts-more
- Highcharts, get point index when shared tooltip is shows/hides
- Highcharts not showing up
- Data labels with "callout" shape misses pointing triangle for short text
- Higcharts: is there a way to display a graph to another page as image?
- Highcharts.js different structure of input data
- Moving Average Line in Highcharts Scattered Chart