stocklift-charts
Version:
StockLift Web Component Charts
144 lines (109 loc) • 3.9 kB
Markdown
# 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
<script
type="module"
src="https://cdn.skypack.dev/stocklift-charts@^1.0.0"
></script>
```
**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
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
```
### 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
<stocklift-charts
accessToken="your-access-token"
companyName="Your Company"
clientId="client-id"
clientName="Client Name"
clientEmail="client@example.com"
></stocklift-charts>
```
**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
<style>
stocklift-charts {
--stocklift-height: 500px;
--stocklift-width: 500px;
}
</style>
<stocklift-charts
accessToken="your-access-token"
companyName="Your Company"
clientId="client-id"
clientName="Client Name"
clientEmail="client@example.com"
></stocklift-charts>
```
**Example**
Here is a complete example of how to use the `stocklift-charts` component in an HTML file:
```html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StockLift Charts Example</title>
<style>
stocklift-charts {
--stocklift-height: 500px;
--stocklift-width: 500px;
}
</style>
</head>
<body>
<stocklift-charts
accessToken="your-access-token"
companyName="Your Company"
clientId="client-id"
clientName="Client Name"
clientEmail="client@example.com"
></stocklift-charts>
<script
type="module"
src="https://cdn.skypack.dev/stocklift-charts@1.0.0"
></script>
</body>
</html>
```
## 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
<style>
stocklift-charts {
--stocklift-height: 600px;
--stocklift-width: 600px;
}
</style>
<stocklift-charts
accessToken="your-access-token"
companyName="Your Company"
clientId="client-id"
clientName="Client Name"
clientEmail="client@example.com"
></stocklift-charts>
```
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.