Stock Chart with Lower Higher value

by Rikin Patel

HTML

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

<div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

JavaScript

var chart;
$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Temperature'
        },
         plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                  // format: "{y}",
                    color: '#FFFFFF'
                    
                    

                }               
            }
        },
        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: {
            labels: {
                format: '{value}'
            },
            title: {
                text: 'Temperature'
            }
        },

        tooltip: {
            shared: true
        },

        series: [{
            name: 'Temperature',
            type: 'column',
            color: '#9BD1BE',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            marker: {
                enabled: false
            },
             dataLabels: {
                    enabled: false
                    },
            tooltip: {
                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span> = <b>{point.y:.1f}°C</b><br/>'
            }
        }, {
            color: '#AC71C6',
            dataLabels: {
                    enabled: true,
                    formatter: function() {
                    debugger;
        return this.point.high == this.y ? this.series.chart.series[0].data[this.point.index].y : '';
    }
                    }, 
            name: 'Temperature error',
            type: 'errorbar',
            data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
            tooltip: {
                pointFormat: 'Lower CI = {point.low}<br/>Upper CI =...