How to customize the position of gauge indicator in VChart?

Question Description

I hope the title is displayed under the pointer of the gauge chart. Also, there are two lines of title with different styles . How to configure this?

Solution

You can configure indicator. It is displayed in the middle of the chart by default, and you can configure an offset in the y direction（dy）. The indicator also supports multi-line text and separately sets styles.

indicator: [
  {
    visible: true,
    title: {
      style: {
        text: 'Normal',
        dy: 100,
        fill:'rgb(99,110,124)',
        fontSize: 40,
        fontWeight: 800
      }
    },
    content: [
      {
        visible: true,
        style: {
          fontSize: 20,
          dy: 100,
          fill:'rgb(193,200,204)',
          fontWeight: 800,
          text: 'Quality'
        }
      }
    ]
  }
],

Code Example

Quote

• Related tutorial
• Related API
• github