# Installation

> AstrolChart: Blazor charts from AstrolUI based on ApexCharts. Lines, areas, bars, circular, radar, heatmaps, ranges, candlesticks and more, with C# data and the AstrolUI light/dark theme.

Source page: https://doc.astrolui.com/chart/installation

**Astrol.Component.Charts** draws charts from C# lists: you say which property goes on each axis and the component does the rest. It works in **Blazor WebAssembly** and **Blazor Server** and is based on [ApexCharts 3.50](https://apexcharts.com) (MIT license).

## 1. Install the package

From the [**AstrolUI NuGet**](https://nuget.astrolui.com/) (source **https://nuget.astrolui.com/v3/index.json**) or by referencing the project in your solution:

```html
dotnet add package Astrol.Component.Charts

<!-- or in the .csproj -->
<PackageReference Include="Astrol.Component.Charts" Version="10.0.13.*" />
```

## 2. Add the namespace

Components and options live in the **AstrolCharts** namespace. Add it to your **_Imports.razor** (or at the top of each page):

```razor
@* _Imports.razor *@
@using AstrolCharts
```

## 3. Theme and scripts

**No chart script or stylesheet is needed**: ApexCharts (≈600 KB) and the chart theme are downloaded automatically the first time a chart is drawn, and pages without charts do not download them. For texts and tooltips to follow the AstrolUI light/dark theme, the app must include the [basic components](/basic-component/installation) stylesheet (it usually already does).

```html
<!-- AstrolUI theme (colors, light/dark mode), shared with the other components -->
<link href="_content/Astrol.Component.Basic/css/astrol-basic.min.css" rel="stylesheet" />

<!-- No longer needed (they can be removed if you are upgrading) -->
<script type="module" src="_content/Astrol.Component.Charts/js/astrolcharts.min.js"></script>
<link href="_content/Astrol.Component.Charts/css/astrolcharts.min.css" rel="stylesheet" />
```

## 4. Your first chart

Continue with the [**AstrolChart**](/chart/chart-component) page: a minimal example, how your data is connected, the series types, the options and the full reference. Then see the examples of [basic charts](/chart/examples/basic), [circular](/chart/examples/circular), [other types](/chart/examples/more), [ranges and finance](/chart/examples/ranges) and [interaction](/chart/examples/interaction); each one has its full code to copy.