DEV Community

FlyingAndFly
FlyingAndFly

Posted on

How to configure pie chart size in VChart?

Problem Description

The page is narrow, how to adjust the configuration of VChart to make the pie chart occupy as much screen space as possible

Solution

  1. Cancel the default chart padding.

    VChart sets a certain margin for all charts by default. You can configure padding: 0 to cancel the default margin.

  2. Adjust the outerRadius the pie chart.

    By default, the pie chart does not fill the entire canvas, you can configure outerRadius: 1 to set the outer radius ratio to the highest.

Code Example

const data = [
  { value: 10, category: 'One' },
  { value: 9, category: 'Two' },
  { value: 6, category: 'Three' },
  { value: 5, category: 'Four' },
  { value: 4, category: 'Five' },
  { value: 3, category: 'Six' },
  { value: 1, category: 'Seven' }
];

const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: data
    }
  ],
  outerRadius:1,
  padding:0,
  background:'#eeeeee',
  categoryField: 'category',
  valueField: 'value',

};

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

vchart.renderSync();

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

Results


Quote

💡 One last tip before you go

Tired of spending so much on your side projects? 😒

Take advantage of early-bird pricing ❤️

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay