javascript - Highcharts Solid Gauge only want to show 1 data label -
i'd use highcharts in project of mine having trouble javascript i'm new language. i've got current chart customized exception of data labels overlapping each other because there more 1 element in data array.
// speed gauge $('#container-speed').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 200, title: { text: 'speed' } }, credits: { enabled: false }, series: [{ name: 'speed', data: [160, 50], datalabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>' }, tooltip: { valuesuffix: ' km/h' } }] }));
you can see above data: [160, 50]
array. must place array elements largest lowest data plot on graph drawn on previous; fine, i'm handling that.
my issue how can datalabels display data[0]? i've tried numerous ways no luck. greeted blank screen in jsfiddle assume invalid js.
here default graph showing problem in jsfiddle: http://jsfiddle.net/wzx8r9qq/
what understand code having 1 series 2 data points (160, , 50). so, display either can make enable both or not.
for want achieve, think alternative use two series instead of 1 , displaying value 1 series , not other. note: here 2 series 1 above another.
here updated code , jsfiddle
// speed gauge $('#container-speed').highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 200, title: { text: 'speed' } }, credits: { enabled: false }, series: [{ name: 'speed', data: [160], datalabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>' }, tooltip: { valuesuffix: ' km/h' } }, { name: 'speed', data: [50], datalabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '"></span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>' }, tooltip: { valuesuffix: ' km/h' } } ] }
Comments
Post a Comment