Time bonus

S. Schluricke

by Tenobaal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div class="col-xl-3 col-lg-3 col-md-6">
    <h1 class="chart-container">Time advantage</h1>
    <div id="highchart1" class="highcharts-container"></div>
  </div>

	<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
</body>

<script>
data = {'name': ['Power', 'Slope', 'Wind', 'Speed'], 
        'values': [200, 5, -2, -10],
        'colors': ['#45B384', '#BBD043', '#B2CDCD', '#64c2c8'],
        'units': ['W', 'W/%', 'W/kph', 'W/kph'],
        }
        
data2 = [
	{'name': 'power', 'data': [200], 'color': '#45B384', 'unit': 'W', 'yAxis': 0},
  {'name': 'Slope', 'data': [5], 'color': '#BBD043', 'unit': 'W/%', 'yAxis': 0},
  {'name': 'Wind', 'data': [-2], 'color': '#B2CDCD', 'unit': 'W/kph', 'yAxis': 0},
  {'name': 'Speed', 'data': [10], 'color': '#64c2c8', 'unit': 'W/kph', 'yAxis': 0},
  ]
</script>

SCSS

body {
  background-color: #1B4152;
}

h1 {
  color: white;
  text-align:center
}

JavaScript

var bar_chart_simple = function (data, chart_container) {

  var options = {
    chart: {
      renderTo: chart_container,
      type: 'column',
      backgroundColor: null,
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    title: null,
    xAxis: {
    	categories: ['power', 'slope', 'wind', 'speed'], 
      labels: {
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
    },
    legend: {
    	enabled: false,
    },
    yAxis: [{},{opposite: true}],
    plotOptions: {
      column: {
    		borderWidth: 0,
				dataLabels: {
					enabled: true,
          overflow: 'none',
          style: {
            fontSize: '16px',
            color: 'white',
            textOutline: 0,
          },
				},
      },
              
    },
    series: data
  }
  var chart = new Highcharts.Chart(options);
};

bar_chart_simple(data2, 'highchart1');