grafico_linha

Browse more Html Examples
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<base href="https://www.highcharts.com/demo/line-basic" />
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
<style type="text/css">
div
{
   width:100%;
   height:100%;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var arr = [
            {
                ['2019/01', 43934],
                ['2019/02', 52503],
                ['2019/03', 57177],
                ['2019/04', 69658],
                ['2019/05', 97031],
                ['2019/06', 119931],
                ['2019/07', 137133],
                ['2019/08', 154175]
            },
            {
                ['2019/01', 4334],
                ['2019/02', 5503],
                ['2019/03', 5177],
                ['2019/04', 6658],
                ['2019/05', 9031],
                ['2019/06', 19931],
                ['2019/07', 17133],
                ['2019/08', 14175]
            },
        ];
    Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    xAxis: {
        title: {
            text: 'Number of Employees'
        },
        labels: {
            formatter: function() {
                return arr[this.value][0];
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
        }
    },

    series: [
        {
            name: 'MBB',
            data: arr[0],
        },
        {
            name: 'MBB 2',
            data: arr[1],
        }
    ],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
</script>
</body>
</html>
grafico_linha

Follow

Newsletter
