Highchart - colors depending on values

Question

I want to give a color for bars depending on their values.

1. For example if you a bar value 5000 then the color should be Dark RED similar for 3000 less darker than 5000 bar values so on...

2. I want to add total space like 100TB above all bars(some text on my bar value)

   `

   Availability Bar Chart

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Disk Utility'
            },
            subtitle: {
                text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Application Name</a>'
            },
            xAxis: {
                categories: ['Checkout', 'Hermes', 'Hybris', 'Marketplace', 'Mobile'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Used (TB)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                column: {
                    dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                                style: {
                                    textShadow: '0 0 3px black'
                                }
                            }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                data: [107, 311, 635, 203, 244]
            }]
        });
    });
   

Fiddle

Answer 1

Here is updated fiddle

You can use "Zones" in plotoptions to define a range and relevant color , as per code below :

zones: [{
        value: 200,  
        color: '#bdbdbd'  
    },{
        value:300,
        color: '#ff0000'  
    },
    {
        value:500,
        color: 'blue'  
    },{
        value:800,
        color: 'black'  
    }]