Right-aligned bar chart numeric labels
Tags: visactor, vchart
Published: 2024-06-26 07:20:03

---
title: Right-aligned bar chart numeric labels
published: true
description: 
tags: visactor, vchart
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-26 07:19 +0000
---

## Title

Right-aligned display of bar chart numerical labels

  


## Description

Display the labels uniformly on the right and align them to the right.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kywlx23f1z6rkf20ec2e.png)



## Solution

You can use the ` extensionMark  `property provided by VChart to implement it through custom graphics.

## Code Example

```
const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'Apple',
          value: 214480
        },
        {
          name: 'Google',
          value: 155506
        },
        {
          name: 'Amazon',
          value: 100764
        },
        {
          name: 'Microsoft',
          value: 92715
        },
        {
          name: 'Coca-Cola',
          value: 66341
        },
        {
          name: 'Samsung',
          value: 59890
        },
        {
          name: 'Toyota',
          value: 53404
        },
        {
          name: 'Mercedes-Benz',
          value: 48601
        },
        {
          name: 'Facebook',
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: 'Intel',
          value: 43293
        },
        {
          name: 'IBM',
          value: 42972
        },
        {
          name: 'BMW',
          value: 41006
        },
        {
          name: 'Disney',
          value: 39874
        },
        {
          name: 'Cisco',
          value: 34575
        },
        {
          name: 'GE',
          value: 32757
        },
        {
          name: 'Nike',
          value: 30120
        },
        {
          name: 'Louis Vuitton',
          value: 28152
        },
        {
          name: 'Oracle',
          value: 26133
        },
        {
          name: 'Honda',
          value: 23682
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    }
  ],
  label: {
    visible: false
  },
  extensionMark: [
    {
      type: 'text',
      dataId: 'barData',
      visible: true,
      style: {
        text: datum => datum.value,
        fontSize: 12,
        x: (datum, ctx) => {
          return ctx.getRegion().getLayoutRect().width + 10;
        },
        y: (datum, ctx) => {
          return ctx.valueToY([datum.name]) + ctx.yBandwidth() / 2;
        },
        textBaseline: 'middle',
        textAlign: 'right',
        fill: "#1664FF",
        fontSize: 12
      }
    }
  ]
};

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

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

  


## Result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uk6bcu7gyq7eymajdpm.png)



## Related Documents

-   Tutorial: https://visactor.io/vchart/guide/tutorial_docs/extend/custom_mark
-   API：https://visactor.io/vchart/option/barChart#extensionMark
-   Github：https://github.com/VisActor/VChart/