How to display segmented linear progress bar?

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?

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;
Enter fullscreen mode
Exit fullscreen mode

Result

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:

Github:GitHub – VisActor/VChart: VChart, more than just a cross-platform charting library, but also an expressive data storyteller.


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Amd epyc dedicated servers (tbd).