DEV Community

FlyingAndFly
FlyingAndFly

Posted on

How to set a default selected effect for VChart pie charts?

Problem description

When drawing a pie chart for the first time, I hope to highlight a block. How should I configure it?

Solution

  1. First, you need to set the graphic style in the selected state in the chart spec configuration. 
 pie: {
    state: {
      selected: { 
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
Enter fullscreen mode Exit fullscreen mode
  1. Set the default selected data item through setSelected API 
const vchart = new VChart(spec, { dom });
vchart.renderSync();
vchart.setSelected({
    // one data record
})
Enter fullscreen mode Exit fullscreen mode

Code example 

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    state: {
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },

};

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

vchart.setSelected({ type: 'oxygen'})

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

Results show

Related Documents

Top comments (0)

Read next

jennapederson profile image

What I learned while building my first game

Jenna Pederson -

srbhr profile image

AI Co-Pilots Uncovered with 4 Powerful 🔥 Open Source Repos 💻

Saurabh Rai -

jwilliamsr profile image

AI Security: How to Protect Your Projects with Hardened ModelKits

Jesse Williams -

sonaykara profile image

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Sonay Kara -