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 Query
- How to represent a point which is outside range of x and y axis in highcharts
- how to pass values to tooltip which not in x and y axis in highcharts
- How to set point in highcharts when x axis and y axis has data as text values?
- Showing all values on one point on x axis and changing range for rCharts highcharts
- How to create a column range chart in Highcharts using range and navigator functions?
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Highcharts - How to remove connecting line between fixed tooltip and point
- How to add space between chart and axis in highcharts
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- Highcharts - how to create multiple y axis and group the data series
- how to hide/show scrollbar and range selector of highcharts on button click?
- how to show column and area charts with different y axis with same category and same x axis in highcharts
- How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)
- Custom "compare" and axis range in Highcharts
- Which one is better to represent an API fetched data in react js and please explain how to do that?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- How to display only last point on highcharts and that point should travel with chart line?
- Highcharts - how to access category of multiple axis of the point from tooltip
- How to transform a point with latitude and longitude value to a coordinates in highcharts map?
- highcharts not displaying line when last point is before current x Axis minimum and next point is after current X Axis maximum
- How to move point's label and SVGs by moving a point graphic in highcharts gantt?
- How to show first and last label of x axis Highcharts
- Highcharts how to use column title as X axis and not as Legend
- How to plot the X axis data point for uneven tick interval at in Highcharts
- How to make a rendered label in Highcharts always visible and still relative to the point clicked or hovered over
- How to Increase minimum point value and the color of series in advanced accessible charts in Highcharts by making it traverse
- How to call another function on changing the time range selector and date selector in Highcharts stock?
- how can I use rangeselector and navigation in highcharts in the given code
- HIGHCHARTS - Given a series with UNIX stamps and values pairs for the data, how do I show only the date for the first and last point on xAxis?
- Highcharts : How to increase marker radius based on the value range in Y axis in Scatter Graph?
More Query from same tag
- how to display data-point like 0-10,10-20..etc on xAxis in hichart
- R Shiny - Highcharts: Tooltip delay before display
- highcharts donut pie - different color for the data than its drilldown
- Using Highcharts with FastAPI
- Hide the First Value Data in Series HighCharts
- Fix Highcharts dataLabels to the bottom
- Variable tick length in highcharts
- Highcharts tooltip using HTML allows advanced formatting like images
- High charts click on one data point the other data points should disable
- Drilldown event in Highcharts column chart
- different approximation methods (dataGrouping) for each Series in one Highstocks-Chart?
- JQuery UI tabs and multiple Highcharts
- Showing HighCharts in A JQuery Mobile application
- How can I get proper object through loop using javascript for Bubble Charts of Highcharts
- keep column in front of spline lines in highchart
- HeighCharts SVG Keep font-size fix
- HIGHCHARTS: Filling area above line with color area representing contribution to line values
- Scale graph in angular
- horizontal scroll bar in highcharts
- "pointAttr" attribute is missing in Highcharts library 5.0.0
- How to customize both, width of the bar & spacing between bar in Highcharts.js
- Highcharts json daily graph
- Highcharts - columns too thin in differents zoom time
- Highchart Dates in data
- Strange issue Highchart tick interval
- Highcharts with boost not rendering correctly at small intervals
- Highcharts Wind rose increase surface bar
- Drilldown more than 1 subreport using Highcharts
- Show 1st of every month on highcharts
- How do I add text to a gauge's ticks?