$(function () { $('#container-att').highcharts({ chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }, credits: { enabled: false }, title: { text: 'Attenuation' }, pane: { startAngle: -90, endAngle: 90, background: [{ borderWidth: 0, backgroundColor: 'transparent' }] }, exporting: { enabled: false }, // the value axis yAxis: { min: 0, max: 100, lineColor: 'transparent', minorTickInterval: 'auto', minorTickWidth: 0, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 0, tickWidth: 2, tickPosition: 'inside', tickLength: 0, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: null, }, plotBands: [{ from: 0, to: [+beerData.att], color: '#55BF3B', innerRadius: '90%', outerRadius: '105%' }, { from: [+beerData.att], to: 100, color: '#DF5353', innerRadius: '90%', outerRadius: '105%' }] }, plotOptions: { gauge: { dataLabels: { borderColor: 'transparent' }, dial: { radius: '75%', backgroundColor: '#666666', borderWidth: 0, baseWidth: 7, topWidth: 1, baseLength: '90%', // of radius rearLength: '0%' }, pivot: { backgroundColor: '#666666', radius: 3 } } }, series: [{ name: 'Attenuering', data: [+beerData.att], enableMouseTracking: false, tooltip: { valueSuffix: ' %' }, dataLabels: { enabled: true, format: '{point.y:,.00f}'+'%', style: { fontWeight:'normal', fontSize: '18px' } } }] }); });