VChart 2.0.19
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 Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=85-How to display scales at several points on the x-axis of an area chart——VisActor/VChart FAQ documents!!!###!!!

How to display scales at several points on the x-axis of an area chart?

Question Description

Area charts like (https://www.visactor.io/vchart/demo/area-chart/null-value-area) contain a lot of data, such as hundreds. When the label content on some axes is too long, it is easy to overlap or be too visually dense. The scales on the X-axis need to be displayed at certain intervals.

Is there any configuration for this type of chart so that the coordinate axis displays scales every few points, similar to echarts' interval?

Solution

Different chart libraries have different solutions. According to the demo you gave, you only need to enable axis sampling in VChart to avoid the problem of axis text occlusion.

  • sampling Whether to enable axis data sampling, enabled by default. After axis sampling is turned on, axis data will be sampled and displayed to prevent overlapping of axis data.

If you also want to customize the spacing between axis labels, you can control the spacing between axis labels by configuring label.minGap.

  • MinGap can be used to customize the minimum spacing between labels (unit: pixels). Only takes effect when axis sampling starts (sampling: true). This configuration affects the results of axis sampling.

Code Example

Results

Quote