Chart Component Examples

This directory contains examples of how to use the chart component in different configurations.

Basic Usage

typescript import { Chart } from 'orb-chart'; // Create a chart element const chart = document.createElement('chart-component') as Chart; document.body.appendChild(chart); // Configure the chart chart.chartOptions = { chart: { type: 'line' // 'line', 'area', 'bar', 'column', 'pie', etc. }, title: { text: 'My Chart Title' }, series: [{ name: 'Data Series', data: [1, 2, 3, 4, 5] }] };

Available Chart Types

The component supports all chart types available in Highcharts:

• Line
• Area
• Column
• Bar
• Pie
• And many more...

Updating Charts

You can update a chart by setting new options:

chart.chartOptions = updatedOptions;

Responsive Design

Charts automatically resize to fit their container. To ensure proper sizing:

1. Make sure the container has a defined height
2. The chart will adapt to the container's dimensions

Advanced Configuration

For advanced configuration options, refer to the Highcharts API Documentation.