BNetzA - 4 Highcharts

by Jens Kühn

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div class="row">
  <div class="col-xs-6">
    <div id="container-line" class="container"></div>
  </div>
  <div class="col-xs-6">
    <div id="container-column" class="container"></div>
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <div id="container-steps" class="container"></div>
  </div>
  <div class="col-xs-6">
    <div id="container-scatter" class="container"></div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
    background: #e0e0e0;
}
.container {
    min-width: 200px;
    max-width: 600px;
    height: 250px;
    margin: 1em auto;
}

JavaScript

// Set default options to the values for HC3
function Highcharts3(H) {

    var buttonGradient;

    H.setOptions({
        colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970','#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
        chart: {
            borderRadius: 5 // now 0
        },
        credits: {
            enabled: false
        },
        title: {
            style: {
                color: '#274b6d', // now #333333
                fontSize: '16px' // now 18px
            }
        },
        subtitle: {
            style: {
                color: '#4d759e' // now #555555
            }
        },
        legend: {
            borderRadius: 5, // now 5
            borderWidth: 1, // now 0
            itemDistance: 8, // now 20
            itemStyle: {
                color: '#274b6d', // now #333333
                fontWeight: 'normal' // now bold
            },
            margin: 10, // now 20
            symbolRadius: 2 // now 0
        },
        tooltip: {
            backgroundColor: 'rgba(255,255,255,.85)', // now 'rgba(249, 249, 249, .85)'
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
        },
        xAxis: {
            tickLength: 5, // now 10
            title: {
                style: {
                    color: '#4d759e', // now #707070
                    fontWeight: 'normal' // now bold
                }
            }
        },
        yAxis: {
            tickLength: 5, // now 10
            title: {
                style: {
                    color: '#4d759e', // now #707070
                    fontWeight: 'normal' // now bold
                }
            }
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        halo: null
                    }
                }
            },
            line: {
                marker: {
                    enabled: true // now...