Always display value in highcharts column chart

Question

I am not exactly new to highcharts, but I am not exactly a "power user" either.

I have these charts on a security report that will almost invariably always have at least 1 column that has no value displayed because the value is too low, compared to the others.

The design requirement is that these do not have tool tips, just the data being displayed.

Maybe I am being thick, but when I think i see the answer I try it and it doesn't work... for example I have tried setting the "min" attribute on the x axis etc, but no luck. Is this doable? I assume if it is, I am putting the attribute in the wrong place.

Here is an example, look at column one code sample is in there... but it is below as well

JSFiddle Link : http://jsfiddle.net/ur58nae5/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            backgroundColor: null,
            style: {
            fontFamily: 'helvetica, arial'
            }
        },
        colors:['#F5A623'],
        credits: false,
        title: {
            text: 'Attacks by Risk Score'
        },
        subtitle: {
            text: 'Number of malicious IPs seen in this period based on maximum risk score'
        },
        xAxis: {
            type: 'category',
            title: {
            text: "Risk Score"
            },
            labels: {
                rotation: 0,
                style: {
                    fontSize: '11px',
                    fontFamily: 'helvetica, arial, Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of IP Addresses'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        series: [{
            name: 'IPS',
            data: [
                ['1', 21],
                ['2', 109],
                ['3', 112],
                ['4', 125],
                ['5', 106],
                ['6', 112],
                ['7', 143],
                ['8', 207],
                ['9', 386],
                ['10', 908]

            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '10px',
                    fontFamily: 'helvetica, arial, sans-serif',
                    textShadow: false,
                    fontWeight: 'normal'

                }
            }
        }]
    });

});

Answer 1

As I understand it, your problem is that sometimes the columns are too small to display the dataLabels. You have a couple of options: You can use a logarithmic scale to make the data differences less pronounced. http://jsfiddle.net/ur58nae5/1/

    yAxis: {
        type:'logarithmic',
        title: {
            text: 'Number of IP Addresses'
        }
    },

Or you can format points that are smaller than some threshold to move the label outside the column

series: [{
    name: 'IPS',
    data: [
        {x:1, y:21, dataLabels: { color:'#000', y:-15}},
        ['2', 109],
        ['3', 112],
        ['4', 125],
        ['5', 106],
        ['6', 112],
        ['7', 143],
        ['8', 207],
        ['9', 386],
        ['10', 908]

    ],
    dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '10px',
            fontFamily: 'helvetica, arial, sans-serif',
            textShadow: false,
            fontWeight: 'normal'

        }
    }
}]

http://jsfiddle.net/ur58nae5/2/ http://jsfiddle.net/ur58nae5/3/