DEV Community

FlyingAndFly
FlyingAndFly

Posted on

1 1 1

How to configure a bar chart to display more of the axis labels when the labels are too long?

Problem description

The axis text labels in the chart are relatively long. I hope to increase the axis width to display more text. How should I configure it?

Solution

You can configure axes.width to set the width of the axis component.

  1. Width: '50%': Configure the percentage string, which represents that the component width accounts for half of the chart during layout
  axes: [
    {
      orient: 'left',
      width: `50%`
    }
  ],
Enter fullscreen mode Exit fullscreen mode
  1. Width: 100: Configure a fixed value, representing the pixel width of the component width during layout

Code example

const spec = {
  type: 'bar',
  width:450,
  height: 250,
  data: [
    {
      id: 'barData',
      values: [
    {
        "name": "Product-Name-:Apple",
        "value": 214480
    },
    {
        "name": "Product-Name-:Google",
        "value": 155506
    },
    {
        "name": "Product-Name-:Amazon",
        "value": 100764
    },
    {
        "name": "Product-Name-:Microsoft",
        "value": 92715
    },
    {
        "name": "Product-Name-:Coca-Cola",
        "value": 66341
    },
    {
        "name": "Product-Name-:Samsung",
        "value": 59890
    },
    {
        "name": "Product-Name-:Toyota",
        "value": 53404
    },
    {
        "name": "Product-Name-:Mercedes-Benz",
        "value": 48601
    },
    {
        "name": "Product-Name-:Facebook",
        "value": 45168
    },
    {
        "name": "Product-Name-:McDonald's",
        "value": 43417
    },
    {
        "name": "Product-Name-:Intel",
        "value": 43293
    },

]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    },
    {
      orient: 'left',
      width: `50%`
    }
  ],
  label: {
  }
};

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay