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

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -