Error bar

by koh_edwin

HTML

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

<!--figure class="highcharts-figure"-->
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing the use of error bar series to visualize uncertainty or
        error in datasets. In this demo, both the line series and the column
        series have error bars attached to them, showing the uncertainty range.
    </p>
<!--/figure-->

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        zooming: {
            type: 'xy'
        }
    },
    title: {
        text: 'Temperature vs Rainfall'
    },
    legend: {
					itemStyle: {
						fontSize: 10,
						fontWeight: 'normal',
						color:'#000000',
					}, 
					//enabled:ChartData.Configuration.LengendIsEnabled, 
					//accessibility: {keyboardNavigation: {enabled: false}}
				},
    xAxis: [{categories: ['Jan','Feb','Mar','Apr','May','Jun']}],
    yAxis: [
        {labels: {formatter: function () {
                //const label = this.(this);
                console.log('HERE LABEL',this)
                return this.value+((this.isLast)?' °C':'');
            }},//{format: '{value} °C',style: {color: '#DF8500'}},
            title: {text: 'Temperature',style: {color: '#DF8500'}}},
        {title: {text: 'Rainfall',style: {color: '#6b8abc'}},
            labels: {format: '{value} mm',style: {color: '#6b8abc'}},opposite: true}],

    //tooltip: {shared: true},

    series: [
        {name: 'Rainfall',type: 'column',color: '#6b8abc',
            data: [null, null, null, 129.2, 144.0, 176.0, ],
        },
        
        {name: 'Temperature',type: 'spline',color: '#DF8500',lineWidth: 2,
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
            
        },
        {
        	name: 'bars1',
          type: 'errorbar',
        	states: {
      			hover: {
        			enabled: false
      			}
    			},
          data: [null, null, null,[128, 136],[140, 150],
          		[171, 179]
          ],
        },
        {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]],
        }
    ]
}, function (chart){
	console.log('HERE CHART', chart)
});