Multiple Axes Chart Tutorial With Examples

0
()

Today, We want to share with you Multiple Axes Chart Tutorial With Examples.In this post we will show you Highcharts chart with multiple axes example, hear for How to implement chart with multiple axes using highcharts we will give you demo and example for implement.In this post, we will learn about highcharts multiple series in one chart with an example.

Free Live Chat for Any Issue

Multiple Axes Chart Tutorial With Examples

There are the Following The simple About highcharts multiple charts same container Full Information With Example and source code.

As I will cover this Post with live Working example to develop Add multiple axes to the chart using highcharts example, so the highcharts multiple y axis dynamically is used for this example is following below.

Highcharts Multiple Axes Chart Example

index.html

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

Read Also:  Fixed Placement Columns Chart Tutorial With Examples

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts - Multiple axes Chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var graphtype = {
                zoomType: 'xy'
            }
            var graphTitle = {
                text: 'Average Monthly Weather Data for Surat'
            }
            var graphchildtitle = {
                text: 'Source: Pakainfo.com'
            }
            var graphxaxis = [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true
            }]
            var graphyaxis = [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    }
                },
                opposite: true

            }, { // Secondary yAxis
                gridLineWidth: 0,
                title: {
                    text: 'Rainfall',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                }

            }, { // Tertiary yAxis
                gridLineWidth: 0,
                title: {
                    text: 'Sea-Level Pressure',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value} mb',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }]
            var graphtooltip = {
                shared: true
            }
            var graphlegend = {
                layout: 'vertical',
                align: 'left',
                x: 80,
                verticalAlign: 'top',
                y: 55,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#3d3d3d'
            }
            var graphseries = [{
                name: 'Rainfall',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' mm'
                }
            }, {
                name: 'Sea-Level Pressure',
                type: 'spline',
                yAxis: 2,
                data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                marker: {
                    enabled: false
                },
                dashStyle: 'shortdot',
                tooltip: {
                    valueSuffix: ' mb'
                }
            }, {
                name: 'Temperature',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: ' °C'
                }
            }]
            $('#chart-full-content').highcharts({
                chart: graphtype,
                title: graphTitle,
                subtitle:graphchildtitle,
                xAxis: graphxaxis,
                yAxis:graphyaxis,
                tooltip: graphtooltip,
                legend:graphlegend,
                series: graphseries
            });
        });
    </script>
</head>
<body>
    <div id="chart-full-content" style="min-width: 335px; height: 425px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Spline with Plot Bands Chart Tutorial

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

I hope you get an idea about highcharts multiple y axis alignment.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.