Highcharts bubble chart datalabels color contrast issue

user_11309620 0
Viewed 128

Recently I updated highcharts version from v8.2.2 to v9.1.0. After this migration I noticed that highcharts doesn't draw bubble chart datalabels like before and the contrast of labels is not satisfactory anymore.

here is an image of v8.2.2 which the datalabels are ok. as you see the contrast of datalabels are good. even highcharts added outlines and borders to text for better presentation.

enter image description here

here is an image of v9.1.0 in which without any change in code, and just by updating, the datalabels are not showing well.

enter image description here

how can I achieve previous datalebs design in v9.1.0?

highcharts javascript
1 Answers

Solved this issue. just add these two properties to plotOptions.bubble.dataLabels.style OR plotOptions.series.dataLabels.style and it works.

color: 'contrast',
textOutline: 'none'

my complete plotOptions object:

plotOptions: {
  bubble: {
    minSize: '1%',
    maxSize: '20%',
    dataLabels : {
      style: {
        color: 'contrast',
        textOutline: 'none'
      }
    }
  },
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.name}',
      
    },
    animation: false
  }
},
user_113096200
Related