Highcharts Demo

author(s): Torstein Hønsi

by Joanna Sobańska

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 700px; margin: 0 auto"></div>

JavaScript

data =
[
  ["January",200.7,460.875,1298.55  ],
  ["February",174.675,255.9,1922.475  ],
  ["March",384.9,417.6,4666.575  ],
  ["April",684.975,517.725,5254.2  ],
  ["May",1132.875,700.65,6509.925  ],
  ["June",1764.375,1304.85,5599.425  ],
  ["July",2098.425,1964.925,6137.55  ],
  ["August",1253.7,1057.425,6100.35  ],
  ["September",1049.4,1210.575,4234.5  ],
  ["October",614.175,936.225,3042.825  ],
  ["November",328.875,614.025,1561.05  ],
  ["December",226.35,514.725,1455.6  ]
]

month=[]
autoconsumption_pos=[]
autoconsumption_neg=[]
import_from_grid = []
export_to_grid =[]




for (i=0;i<data.length;i++){
month.push(data[i][0])
autoconsumption_pos.push(data[i][1]/1000)
autoconsumption_neg.push(-data[i][1]/1000)
import_from_grid.push(-data[i][2]/1000)
export_to_grid.push(data[i][3]/1000)
}


Highcharts.chart('container', {
 colors: ['#E0E79D','#c0cf3a','#81CBBB','#029676'],
    chart: {
        type: 'bar',
          marginTop: 50
    },
    title: {
        text: ' '
    },
    xAxis: {
        categories: month
    },
    yAxis: {
        title: {
            text: 'MWh'
        }
    },
    legend: {
        reversed: true,
      
         

       
    },
    plotOptions: {

        series: {
        stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            pointWidth: 40,
                        dataLabels: {
                        borderWidth: 0,
                        enabled: true,
                        color: '#fff',
                        align: 'center',
                        style: {fontWeight: 'bolder', textShadow: false,border: '#5e5e5e'},
                        formatter: function() {console.log(this); return Math.abs(Math.round(this.y*10)/10)},
                        inside: true,
                        textOutline: 0,
                        verticalAlign: 'middle',
                        yHigh: 7,
                        yLow: 7,
                     
                    },
        }
  
    },
   ...