Powerbonus2

S. Schluricke

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div id="chart1" style="height: 400px; margin-top: 1em"></div>

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

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

var power = [400, 300, 200];
var powerDiff = [20, 15, 10];
var speed = [45, 40, 35];
var speedUnit = 'km/h';

var stackedBar = function (power, powerDiff, speed, speedUnit, chart_container) {
		
    var powerPoints = [];
    var powerBonusPoints = [];
    var colors = ['rgba(235,93,64,1)', 'rgba(99, 196, 198, 1)', 'rgba(163, 211, 206, 1)'];
    var colors2 = ['rgba(235,93,64,0.8)', 'rgba(99, 196, 198, 0.8)', 'rgba(163, 211, 206, 0.8)'];
    
    for (var i = 0; i < power.length; i++) {
    	var powerPoint = {
      	name : speed[i] + " " + speedUnit + "<br>" + power[i] + " W",
        y: power[i],
        color: colors[i]
      }
      var powerBonusPoint = {
      	name: powerDiff[i] + " W",
        y: powerDiff[i],
        color: colors2[i]
      }
      powerPoints.push(powerPoint);
      powerBonusPoints.push(powerBonusPoint);
    }
    
    var options = {
        chart: {
            renderTo: chart_container,
            type: 'column',
            backgroundColor: null,
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
        	text: ""
        },
        xAxis: {
						visibel: false
        },
        yAxis: {
            //min: ymin,
            //max: ymax,
            title: {
                enabled: false
            },
            labels: {
                enabled: false,
            },
            gridLineColor: '#6f828c'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0,
                borderWidth: 0,
                groupPadding: 0.1,
                shadow: false,
                dataLabels: {
                    enabled: true,
                    y : -20,
                    format: '{point.name}',
                    style: {
                        fontSize: '16px',
                        color: 'white',
                        textOutline: '0px',
           ...