> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/highcharts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/highcharts/installation.md).

# Installation

Highcharts for WireBootstrap can be downloaded from [here](https://www.wirebootstrap.com/products/highcharts.html).

{% hint style="info" %}
**Note**: Highcharts for WireBootstrap does not include a license for Highcharts.  A [license for Highcharts](https://shop.highsoft.com) must be purchased separately.
{% endhint %}

## Sample Project

The download includes a sample project that demonstrates the features of Highcharts for WireBootstrap.

![Highcharts for WireBootstrap](https://134869680-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FflMFERPOQUBYc0qo8teP%2Fuploads%2FRETjy46wD3QwDOScrAFU%2Fimage.png?alt=media\&token=8c41e5b1-b12d-4eb3-afb2-ba72c2e0dbdc)

After downloading, open the project in any web project editor. Next, open a terminal window and run the `npm first` script when running the project for the first time.  This will install the `npm` packages required to run the project and then open the default page in a new browser window.

```
npm run first
```

Use `npm start` to run the project later now that the packages are installed.

```
npm run start
```

## Assets

To use the component outside of the sample application, reference the library on a web page *after* the [Core WireBootstrap library](https://docs.wirebootstrap.com/wirebootstrap/overview).  

```javascript
<script src="./node_modules/@wirebootstrap/wire/wire.js"></script>
<script src="./wire-highcharts.js"></script>
```

## Class

Highcharts for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the Highcharts for WireBootstrap component, use the `wire.highcharts` class.

```javascript
const myChart = new wire.highcharts();
```

## Render

Render the component using an HTML `div` element.

```javascript
<div id="chart"></div>
...
myChart.render("#chart",{
    ...
});
```