Datenqualität - COLUMN

by Jens Kühn

HTML

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

<div id="container" style="width: 485px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
    
        var colors = Highcharts.getOptions().colors,
            categories = ['Menge', 'Anzahl'],
            data = [{
                    y: 55.11,
                    color: colors[0]
                }, {
                    y: 21.63,
                    color: colors[1]
                }];
        
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                animation: false,
                plotBackgroundColor: '#fafafa',
                width: 485,
                height: 275
            },
            title: {
                text: 'Datenqualität'
            },
            subtitle: {
                text: 'Angaben in Prozent'
            },
            xAxis: {
                categories: categories,
                
            },
            yAxis: {
                min:0,
                max:100,
                title: {
                    text: null
                }
            },
            plotOptions: {
                column: {                    
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +' %';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'%</b>';                    
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            legend: {
                enabled: false
            },
           ...