Astra UI

Getting Started

Components

Charts

Charts are powerful tools for visualizing data. They help users understand trends, patterns, and relationships in complex datasets at a glance.

Preview

Variations

Chart Types

Dwarf Chart

pie Chart

funnel Chart

radar Chart

line Chart

bar Chart

column Chart

scatter Chart

area Chart

Basic Usage

To use the Astra Chart component, add the <astra-composed-chart> tag to your HTML: 

<astra-composed-chart
  type="line"
  data={stocksData}
  keyX="Date"
  keyY="Close"
  width={600}
  height={400}
  header="Stock Prices"
  subheader="Daily closing prices"
/>

Features

The Astra Chart component offers various customization options:

Chart Types

Choose from different chart types using the type attribute: line, bar, column, scatter, and area.

Customization

Adjust the chart's appearance with attributes like width, height, header, and subheader.

Data Binding

Specify data keys using keyX and keyY attributes.

Why Use Astra Charts?

  • Simplicity: Easy to use with a declarative API.
  • Flexibility: Support for various chart types and customizations.
  • Responsive: Charts adapt to different screen sizes and color schemes.
  • Performance: Efficient rendering for smooth user experience.
  • Accessibility: Built with accessibility in mind for all users.

Accessibility

Astra Charts are designed with accessibility in mind:

  • Color schemes are chosen for readability and contrast.
  • Charts include proper ARIA labels for screen readers.
  • Interactive elements are keyboard-accessible.

Fast Travel