Chart

The Chart element in Acho app builder provides a streamlined solution for data visualization serving various purposes, from business reporting, intricate business intelligence analytics to data science project.

Configuration

In the Chart configuration, there are three distinct tabs Property, Chart Styles and CSS, each responsible for a specific level of configuration.

Properties

Properties are the key options for constructing a chart.

Data source: Specify the data you want to visualize in the chart. The data source could be Table Node, Query Node, App data and Page data. For App data and Page data, it should be structured as an array of observations. Only for the Table Node, the system will automatically process and transform the data into a format suitable for chart construction. See Build a chart from Table Nodes for details.

Chart type: Choose a chart type to load a template. Options include: Line Chart, Stack Bar Chart, Grouped Bar Chart, Pie Chart, Area Chart, Scatter Plot, Heatmap, and Choropleth Map.

Dimension: Dimensions are qualitative values. They categorize and label data. For example, in a dataset containing sales figures of different products, 'Product category' could be a dimension. It is the 'what' aspect of your data, providing a context in which the numbers (metrics) can be understood.

Metric: Metrics are quantitative values. They provide measurable data to answer "How much?". For instance, in the previous example, the number of units sold would be the metric. Metrics provide the actual numbers that you'd typically plot on a chart to understand magnitude, trends, or comparisons.

Chart Styles configuration

Basic:

All chart types except Choropleth Map will have and x-field and y-field under the Basic section. By default the chart automatically select the first suitable Dimension and Metric as X-field and Y-field.

X-Field: Name of the data column to use for the x-axis (horizontal variable).

Y-Field: Name of the data column to use for the y-axis (vertical variable).

Some chart types may have additional basic fields to define.

Breakdown field(Z-Field): This field allows for a further breakdown or categorization of the data, providing an additional dimension for analysis.

Size(Scatter Plot): The name of data column to use for the size of points in scatter plot.

X-Axis and Y-Axis configuration

X-axis and Y-axis configurations are for the information present on the two axis, mostly they follows d3 styles, see D3 docs for more details:

• Scale: Choose how data is distributed. linear, log, pow or sqrt

• Position: For the X-axis, decide if it appears at the 'Top' or 'Bottom'. For the Y-axis, set its position to 'Left' or 'Right'.

• Title: Define the axis name and its appearance parameters such as its anchor point and color, etc.

• Line: Customize the main axis line by setting its end cap style, color, and level of opacity, etc.

• Tick: Customize the small axis marks, by setting its count, tick color, the way they're formatted.

• Label: Customize the text appearing alongside the axis like label font, label align, label rotation, label color, etc.

• Grid: Decide whether you want to display gridlines. If so, you can modify their color, style, and width, etc.

Title

Options for configuring the title and subtitle of the chart include settings for orientation, alignment, anchor, rotation, color, displacement values (dx, dy), font type, font size, text limit, and offset.

Marker Label

Marker labels are text annotations that are placed near data points or markers to provide additional information about those points, you can customize the Text, Offset, Font, Font size, Text align, Text baseline, Text rotation, Text Color, Label z-index.

Legends:

Whether the legend is displayed and its format, title, color, etc.

Chart Tooltip

The tooltip that pop-out when clicking the data point/area in the chart. You can customized the content and format of the tooltip.

CSS

General CSS styles like space, padding.

Supported Events

Choose a chart type to view the corresponding supported events

Supported Actions

Render: Send data in an array of JSONs to display on the chart.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.