How to display a color block area in a chart that covers a specified x-axis range?

Problem description

Similar to the effect shown in the figure below, I hope to draw a color block within the specified x-axis range in the chart. How should I configure it in VChart?

Solution

You can achieve this through the markAreacomponent, using the markArea.coordinatesproperty to declare the range of data to be annotated.

• Coordinates: Support configuring data values, VChart will automatically map the data to canvas coordinates for range drawing.

 markArea: [ { coordinates: [ { Date: 'Jan-20', Price: 0.18 }, { Date: 'Mar-23', Price: 0.18 }, { Date: 'Mar-23', Price: 0.12 }, { Date: 'Jan-20', Price: 0.12 } ], label: { text: 'Electricite prices have surged since 2020', position: 'insideTop' } } ], 

Code example

https://visactor.io/vchart/demo/marker/mark-area-basic

Results show

Related Documents

• github：https://github.com/VisActor/VChart
• MarkArea demo: https://visactor.io/vchart/demo/marker/mark-area-basic
• MarkArea tutorial: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/marker