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…


This content originally appeared on DEV Community and was authored by FlyingAndFly

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
      }
    }
  ],

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;

Results show

Related Documents


This content originally appeared on DEV Community and was authored by FlyingAndFly


Print Share Comment Cite Upload Translate Updates
APA

FlyingAndFly | Sciencx (2024-06-17T10:59:30+00:00) Can the VChart axis be set to avoid decimals?. Retrieved from https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/

MLA
" » Can the VChart axis be set to avoid decimals?." FlyingAndFly | Sciencx - Monday June 17, 2024, https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/
HARVARD
FlyingAndFly | Sciencx Monday June 17, 2024 » Can the VChart axis be set to avoid decimals?., viewed ,<https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/>
VANCOUVER
FlyingAndFly | Sciencx - » Can the VChart axis be set to avoid decimals?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/
CHICAGO
" » Can the VChart axis be set to avoid decimals?." FlyingAndFly | Sciencx - Accessed . https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/
IEEE
" » Can the VChart axis be set to avoid decimals?." FlyingAndFly | Sciencx [Online]. Available: https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/. [Accessed: ]
rf:citation
» Can the VChart axis be set to avoid decimals? | FlyingAndFly | Sciencx | https://www.scien.cx/2024/06/17/can-the-vchart-axis-be-set-to-avoid-decimals/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts