VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=167-How to combine percentage bar and TGI chart——VisActor/VChart FAQ documents!!!###!!!

How to combine percentage bar and TGI chart?

Question Description

I would like to use a front-end chart library to implement a combination of percentage bar chart and TGI chart.

The TGI chart uses vertical bars to represent TGI values and connects different bars with lines. As the two charts use different axes, how can we implement this?

Solution

You can use @VisActor/VChart to achieve the desired effect. VChart allows multiple series to be combined in one chart. You only need to set the chart type to "common" and add bar chart and line chart series in the series. Modify the line style of the line chart to dashed line and the point style to rectangle to achieve the effect in the figure. In order to use different coordinate axes for the bar chart and line chart, three coordinate axes need to be configured in the "axes": a left band axis, a bottom linear axis for the line chart, and a linear axis for the bar chart. You can place the bar chart axis at the top and set "visible" to false. By adjusting the "max" property, you can specify the range of the axis to achieve the effect in the figure.

Code Example

The spec is as follows:

Results

Quote