score:1
Here's the idea :
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: ''
},
legend: {
layout: 'vertical',
itemStyle: {
cursor: 'default'
}
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
return false;
}
}
}
},
xAxis: [{
title: {
text: ''
},
categories: ['95', '58', '53', '48', '43', '38', '33']
}],
yAxis: [{
title: {
text: 'ER'
},
lineWidth: 1,
gridLineColor: '#FFF',
plotLines: [{
value: 3.30,
dashStyle: 'shortdash',
width: 2,
color: '#B593CE'
}]
},
{
title: {
text: 'ES'
},
lineWidth: 1,
gridLineColor: '#FFF',
opposite: true
},
{
title: {
text: '2nd Y'
},
lineWidth: 1,
gridLineColor: '#FFF'
}
],
series: [{
yAxis: 0,
type: 'spline',
color: '#00B1F1',
data: [null, 3.23, 3.5, 4.6, 3.2, 4.6, 5.1]
}, {
yAxis: 1,
type: 'spline',
color: '#008D90',
data: [null, 324, 253, 356, 563, 367, 542]
}, {
yAxis: 2,
color: 'red',
data: [9.8],
type: 'spline'
}],
data: {
seriesMapping: [{
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 0,
y: 3
}]
}
});
#container {
min-width: 320px;
height: 400px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
Source: stackoverflow.com
Related Articles
- How to represent a point which is outside range of x and y axis in highcharts
- Showing all values on one point on x axis and changing range for rCharts highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- highcharts - removing decimal places on Y axis with only one point
- Highcharts axis label before first point
- Highcharts x axis date full range even if there is not enough data
- how to pass values to tooltip which not in x and y axis in highcharts
- highcharts axis format decimal point
- Get the x axis range on selecting a zoom range in Highcharts
- Click a point on a highcharts graph from outside of the chart
- HighCharts - Graph axis starting BEFORE first data point
- Highcharts determine if text is outside of data point
- Set max y axis point 10% greater than current max - Highcharts
- Highcharts datetime axis labels according to data point groups
- Custom "compare" and axis range in Highcharts
- Highcharts - Redundant Y Axis Point Markers (Any insight welcome!)
- Highcharts - how to access category of multiple axis of the point from tooltip
- Highlight point range in Highcharts
- highcharts not displaying line when last point is before current x Axis minimum and next point is after current X Axis maximum
- highcharts x axis date variable range
- Highlight a range of Y axis in highcharts
- Display of plotted point labels not appearing properly on X Range Chart for the first date of month - Highcharts
- How to set point in highcharts when x axis and y axis has data as text values?
- How to plot the X axis data point for uneven tick interval at in Highcharts
- Highcharts custom indicator does not affect y axis range after zoom
- Highcharts - Y axis colors by point
- Highcharts : How to increase marker radius based on the value range in Y axis in Scatter Graph?
- Auto setting time axis range in highcharts
- Highcharts showing points on hovering over the line which are outside the chart area when the chart is zoomed in
- Highcharts column width with variable x axis point spacing
- HighMaps how to update data using jQuery
- Rails 3.1 SQL sum only negative numbers
- Drawing a dynamic Mixed Bar and Line chart with HIghchart.js with socket.io for live data
- Query selector for the individual buttons in range selector
- if statement in Highcharts
- Resize/Hide charts in Multi pane in Highcharts
- Highmaps redraw bug after update points (with enabled zoom)
- Highcharts plugin: show/hide tooltips on click
- Highcharts HeatMap cell color disappears when hover in Internet Explorer
- Getting the X Axis value in HighCharts
- highcharts column chart json data is not accepted
- In Highcharts, how to set up title for each pyramid in a multi-pyramid chart
- Highstocks rounding values, and range not accurate for more then two hours of viewing
- how to add dynamic data in a highchart?
- Highchart: Background color of Axis
- How to draw pile/stacked bar chart?
- Graph not rendering series correctly using angular 4
- If a point is clicked then add a marker in highcharts
- Strange behaviour of new mysql json selection syntax with Laravel
- Highcharts 5: TypeError: Cannot read property 'chart' of undefined at e.Chart.reflow