# StockLift Charts
- [Demo Site](https://stocklift.github.io/web-component/)
### Coming Soon!
StockLift SDK Web Component Charts. To obtain an access token head over to the [website](https://stockliftsdk.co).
## Overview
The `stocklift-charts` component is a LitElement-based web component that displays various stock-related views such as summary, sector diversification, geo diversification, top holdings, S&P 500 benchmark, and projections.
## Installation
To use the `stocklift-charts` component, you need to include it in your project. You can do this by including the cdn in your html.
### Importing the Component
Load the module via [skypack](https://www.skypack.dev)
```html
```
**Required Dependencies**
In addition to the `stocklift-charts` component, you also need to include the Plaid CDN for account linking functionality.
Load the Plaid CDN:
```html
```
### Usage
**Basic Usage**
To use the stocklift-charts component, include it in your HTML and provide the required properties: accessToken, companyName, clientId, clientName, and clientEmail.
To use the `stocklift-charts` component, include it in your HTML and provide the required properties: `accessToken`, `companyName`, `clientId`, `clientName`, and `clientEmail`.
```html
```
**Customizing Height and Width**
By default, the component is a square with a height and width of `75vh`. You can customize the height and width using CSS custom properties.
```html
```
**Example**
Here is a complete example of how to use the `stocklift-charts` component in an HTML file:
```html
StockLift Charts Example
```
## Properties
- `accessToken` (String): The access token required to fetch data from the API.
- `companyName` (String): The name of the company.
- `clientId` (String): The client ID.
- `clientName` (String): The name of the client.
- `clientEmail` (String): The email of the client.
## Styling
The component can be styled using the following CSS custom properties:
- `--stocklift-height`: The height of the component (default: `75vh`).
- `--stocklift-width`: The width of the component (default: `75vh`).
```html
```
By following these instructions, you can set up and use the `stocklift-charts` component in your project, customize its appearance, and navigate through the different views it provides.