AutoChart

2 min read
AutoChart = (props: Props): <ConfigProvider />

AutoChart is an immediate auto visualization React component in AVA. It can automatically generate and render the proper chart for visualization based on the input data with one-line of code.

Parameter list

  • props * Input parameters

    • required parameters
    • type: Props object
  • Props Parameter configuration.
PropertiesTypeDescriptionDefault
dataany[]The source data.Default mock panel Optional
fieldsstring[]Recommended data fields.Use all Optional
titlestringThe title of the container.None Optional
descriptionstringThe container description information.None Optional
widthReact.CSSProperties['width']Width.100% Optional
heightReact.CSSProperties['width']Height.100% Optional
classNamestringThe class name of the container.None Optional
language"zh-CN" | "en-US"Language."zh-CN" Optional
purposePurposeSpecifies the purpose of the chart analysis.None Optional
showRankingbooleanWhether to show the recommended chart ranking.true Optional
noDataContentReact.ReactNodeShow nodes when custom data is empty.None Optional
  • Purpose Parameter configuration.
type PURPOSE_OPTIONS = ["Comparison", "Trend", "Distribution", "Rank", "Proportion", 
  "Composition", "Relation", "Hierarchy", "Flow", "Spatial", "Anomaly", "Value"];

Data

data

optional any[]

Row data array. If empty, mock panel is available.

fields

optional string[]

The fields for chart recommendations.

Container

title

optional string

Chart title.

description

optional string

Chart description.

width

optional React.CSSProperties['width'] default: "100%"

Container width.

height

optional React.CSSProperties['height'] default: "100%"

Container height.

className

optional string

Container className.

language

optional "zh-CN" | "en-US" default: "zh-CN"

Internationalization.

Configuration

purpose

optional Purpose

The purpose of visualization.

showRanking

optional boolean default: true

Whether to display the recommended ranking, it can be used to switch chart type.

noDataContent

optional React.ReactNode

To render content without data.