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.

Properties	Type	Description	Default
data	`any[]`	The source data.	Default mock panel `Optional`
fields	`string[]`	Recommended data fields.	Use all `Optional`
title	`string`	The title of the container.	None `Optional`
description	`string`	The container description information.	None `Optional`
width	`React.CSSProperties['width']`	Width.	`100%` `Optional`
height	`React.CSSProperties['width']`	Height.	`100%` `Optional`
className	`string`	The class name of the container.	None `Optional`
language	`"zh-CN" \| "en-US"`	Language.	`"zh-CN"` `Optional`
purpose	`Purpose`	Specifies the purpose of the chart analysis.	None `Optional`
showRanking	`boolean`	Whether to show the recommended chart ranking.	`true` `Optional`
noDataContent	`React.ReactNode`	Show 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.