Highcharts Demo

author(s): Torstein Hønsi

by ewolden

HTML

<script src="https://code.highcharts.com/highcharts.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" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: "bar",
        backgroundColor: "rgba(0, 0, 0, 0)",
        //height: '200px',
        //margin: [40, null, null, null]
    },
    title: {
        text: "Bars",
        align: "left"
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    yAxis: [{
        title: {
            text: ""
        },
        min: 0
    }],
    legend: {
        enabled: false
    },
    series: [{
            data: [{
                name: "Bar1",
                y: 9994708.36
            }],
            name: "Capacidade de Recebimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar1",
                y: 5291.64
            }],
            name: "Capacidade de Recebimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 9472.63
            }],
            name: "Capacidade de Movimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 4002.37
            }],
            name: "Capacidade de Movimento Usada",
            tooltip: {
                pointFormat: "<span...