stocklift-charts
v0.0.13
Published
StockLift Web Component Charts
Downloads
495
Readme
StockLift Charts
Coming Soon!
StockLift SDK Web Component Charts. To obtain an access token head over to the website.
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 via skypack
<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:
<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.
<stocklift-charts
accessToken="your-access-token"
companyName="Your Company"
clientId="client-id"
clientName="Client Name"
clientEmail="[email protected]"
></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.
<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="[email protected]"
></stocklift-charts>Example
Here is a complete example of how to use the stocklift-charts component in an HTML file:
<!DOCTYPE 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="[email protected]"
></stocklift-charts>
<script
type="module"
src="https://cdn.skypack.dev/[email protected]"
></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).
<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="[email protected]"
></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.