DEV Community

FlyingAndFly
FlyingAndFly

Posted on

Can the VChart axis be set to avoid decimals?

Problem description

I am using a bar chart to describe the number of problems. There should be no decimal place in the circumstances. How to avoid the phenomenon of axis text appearing 0.5?

Solution

  • You can use the axes.tick.noDecimalsproperty to configure continuous axes without decimals 
 axes: [
    {
      orient: 'left',
      tick:{
        noDecimals: true
      }
    }
  ],
Enter fullscreen mode Exit fullscreen mode

Code example 

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 1 },
        { month: 'Tuesday', sales: 1 },
        { month: 'Wednesday', sales: 2 },
        { month: 'Thursday', sales: 0 },
        { month: 'Friday', sales: 1 }
      ]
    }
  ],
  axes:[{orient:"left", tick:{noDecimals: true}}],
  xField: 'month',
  yField: 'sales'
};

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 show

Related Documents

Top comments (0)

Read next

ngtduc693 profile image

COBOL Tutorial Series: DB2 vs SQL Server Architecture Comparison - Session 7

Duc Nguyen Thanh -

alexia_cismaru_f49ed201c2 profile image

Using VGG16 for face and gender recognition

alexia cismaru -

specialbroccoli profile image

AI Test Report - Summarize Failed Tests

SpecialBroccoli -

abel5173 profile image

Seeking Advice: Navigating Entry-Level Remote Job Opportunities and Skill-Building

Abel -