-1

here's the demo : online demo

enter image description here

the datalabel is too long to display , i want it just inside the bubble and the overflowed text displayed as "ACDE..."

jjzjx118_2
  • 419
  • 7
  • 23

1 Answers1

0

I can suggest two solutions for this case.

  • set the overflow to ellipsis and set some width for the dataLabel:

Demo: https://jsfiddle.net/BlackLabel/ye5s7m6g/1/

 plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: "{point.name}",
          style: {
            textOverflow: 'ellipsis',
          width: 45
        }
      }
    }
  },

API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.style

  • enable textPath feature in the dataLabels:

Demo: https://jsfiddle.net/BlackLabel/0srgnvxd/1/

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: "{point.name}",
                textPath: {
            enabled: true
        }
      }
    }
  },

API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.textPath.enabled

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • thanks for your answer, textPath maybe not meet the UI design, and for ellipsis approche, it works but I want the width can be responsive to the bubble's width. I tried `width:50%`. but it's the 50% of its self not the bubble – jjzjx118_2 Jan 15 '20 at 14:42
  • Here is a function which calculates each bubble width, set this width for the dataLabel and next translate it to the middle of the bubble, but only once- after the first render, later this will be done automatically after each resize. https://jsfiddle.net/BlackLabel/y2t6se1b/ – Sebastian Wędzel Jan 15 '20 at 15:39
  • thanks for you answer @Sebastian , it works great. but I use react-highchart-official lib , can you please tell me how to bind the render() method in react component(funcation component)? you can modify my demo :https://stackblitz.com/edit/react-highchart-jjzjx118-6vef8y – jjzjx118_2 Jan 16 '20 at 03:41
  • There you go: https://stackblitz.com/edit/react-highchart-jjzjx118-wufufc?file=chartConfig.js – Sebastian Wędzel Jan 16 '20 at 09:51