How to display segmented linear progress bar?
Published: 2024-04-29 04:27:15

## **Title**

How to display segmented linear progress bar?

## **Description**

How can I display a segmented linear progress bar like the one shown in the image below?

![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=YjZjYmU1MTA1NWJmZDFkOWZjMTdjMjIyNWQ0OWNlYjlfSXZiaW02U2hXbm53Y2FpTkxqaVZ2TjdvOHdFMFR6NXlfVG9rZW46WWVra2JBZTlUb2haeVV4ME1TMGNzUnVrbmNEXzE3MTQzNjQ4MDQ6MTcxNDM2ODQwNF9WNA)

## **Solution**

In VChart, you can use extension marks to display the dividing lines between each segment.

## **Code Example**

```
const spec = {
  type: "linearProgress",
  data: [
    {
      id: "id0",
      values: [
        {
          type: "Tradition Industries",
          value: 0.85,
          goal: 0.7,
          text: "79.5%"
        }
      ]
    }
  ],
  direction: "horizontal",
  xField: "value",
  yField: "type",
  seriesField: "type",
  height: 80,
  cornerRadius: 20,
  progress: {
    style: {
      cornerRadius: 0
    }
  },
  bandWidth: 30,
  axes: [
    {
      orient: "right",
      type: "band",
      domainLine: { visible: false },
      tick: { visible: false },
      label: {
        formatMethod: (val) => "随便写点啥",
        style: {
          fontSize: 16
        }
      }
    },
    {
      orient: "bottom",
      type: "linear",
      visible: true,
      grid: {
        visible: false
      },
      label: {
        formatMethod: (val) => `${val * 100}%`,
        flush: true
      }
    }
  ],
  extensionMark: [
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([1 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    },
    {
      type: "rule",
      dataId: "id0",
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        x1: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([2 / 3]);
        },
        y1: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        stroke: "#fff",
        lineWidth: 4,
        zIndex: 1
      }
    }
  ]
};

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

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

![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=ZjhjYzg3ZmZhMzU2M2MyNWM2ZjU3M2Y1ZDY3YTZlN2VfbzZwVGxZNTlOb0Fkd3o4ekZIR3U3TGZnQTRrc3Jrdm9fVG9rZW46WjZuWmJtZnE2b09GbjR4NjA2VmNUQlJxbkhnXzE3MTQzNjQ4MDQ6MTcxNDM2ODQwNF9WNA)

Demo: https://codesandbox.io/p/sandbox/segment-linear-progress-3v4w5q?file=%2Fsrc%2Findex.ts%3A4%2C14-103%2C2

## **Related Documents**

Demo：https://codesandbox.io/p/sandbox/segment-linear-progress-3v4w5q?file=%2Fsrc%2Findex.ts%3A4%2C14-103%2C2

API：

- Extension mark: [VisActor](https://visactor.io/vchart/option/linearProgressChart#extensionMark)

Github：[GitHub - VisActor/VChart: VChart, more than just a cross-platform charting library, but also an expressive data storyteller.](https://github.com/VisActor/VChart/)