What problem does this feature solve?

Goal

The goal of this feature proposal is to enhance the chart annotation functionality in Apache ECharts, a powerful and versatile charting library. By introducing a new feature called "Chart Annotation," we aim to provide users with the ability to add contextual and informative annotations to their charts, thereby improving data visualization and data mining.

Scope

Annotation-related features to be included in this proposal are as follows:

Provide a Variety of Useful Shapes: Users should have access to a diverse set of annotation shapes, such as arrows, labels, rectangles, circles, and more. This range of shapes allows users to choose the most appropriate annotation style for their specific data visualization needs.

Dynamic Positioning Relative to Chart Coordinates: Annotations should be positioned dynamically in relation to the chart coordinates. This ensures that when the data is updated or when the chart is resized, the annotations remain in the expected position, maintaining their relevance and coherence with the underlying data.

Removal of Created Shapes: Users should be able to remove or delete created annotation shapes when they are no longer needed. This feature enables users to modify or refine their annotations as required, providing flexibility in managing the visual elements within the chart.

Serialization and Deserialization of Annotations: The ability to serialize and deserialize annotations is crucial for storing and restoring annotations as part of the chart configuration. This feature allows users to save annotations, such as in local storage or external storage mediums, and retrieve them later, ensuring the persistence and portability of annotated charts.

Design

The design of the chart annotation feature should prioritize the following considerations:

Integration with Chart Coordinates: The annotation shapes should be designed to align seamlessly with the chart coordinates, ensuring that they accurately represent the intended data points or regions of interest. This integration ensures that annotations maintain their relevance even when the chart is updated or resized.

User-Friendly Interaction: The user interface for creating, modifying, and removing annotations should be intuitive and user-friendly. It should provide convenient options for selecting annotation shapes, positioning them on the chart canvas, and performing interactive actions, such as resizing or rotating.

Flexibility in Styling: Users should have the ability to customize the appearance of annotations, including font styles, colors, line thickness, transparency, and positioning. This flexibility enables users to align the annotations with their preferred visual aesthetics and ensures consistency with the overall chart design.

Related issues

#10020#18160

By incorporating these design considerations into the chart annotation feature, users will have a powerful toolset at their disposal to add meaningful and visually appealing annotations to their charts, enabling them to effectively communicate and explore their data.

What does the proposed API look like?

toolbox.feature.annotation = {
    show: true,
    ...
}