Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Spline with Inverted Axes Chart Example
Keywords : Spline chart with inverted axes using highcharts, How to implement inverted axes in spline chart using highcharts
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Spline with inverted axes chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { type: 'spline', inverted: true } var chartitle = { text: 'Atmosphere Temperature by Altitude' } var chartsubtitle = { text: 'According to the Standard Atmosphere Model' } var chartxaxis = { reversed: false, title: { enabled: true, text: 'Altitude' }, labels: { formatter: function () { return this.value + 'km'; } }, maxPadding: 0.05, showLastLabel: true } var chartyaxis = { title: { text: 'Temperature' }, labels: { formatter: function () { return this.value + '°'; } }, lineWidth: 2 } var chartlegend = { enabled: false } var chartooltip = { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x} km: {point.y}°C' } var chartplotoptions = { spline: { marker: { enable: false } } } var chartseries = [{ name: 'Temperature', data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] }] $('#container').highcharts({ chart:chartype, title: chartitle, subtitle: chartsubtitle, xAxis: chartxaxis, yAxis: chartyaxis, legend: chartlegend, tooltip:chartooltip, plotOptions: chartplotoptions, series:chartseries }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next