How to achieve line break effect for pie chart labels in @visactor/vchart?

Solution

The pie chart label supports the formatting method. In the formatting method, we can switch the label to rich text by setting type: rich in the return object; rich text supports common line breaks, ICONS, and image displays.

Code Examples

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '26.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    style: {
      cornerRadius: 10
    },
    state: {
      hover: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      },
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true,
    formatMethod: (label, datum) => {
      return {
        type: 'rich',
        text: [{
          text: `${label}\n`,
          fontSize: 12,
          fill: '#8a8a8a',
          lineHeight: 20,
          fontWeight: 400
        }, {
          text: `${datum._percent_}%`,
          fill: '#121212',
          fontSize: 14,
          fontWeight: 500,
          lineHeight: 22,
        }]
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;