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 the module 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="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.
<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:
<!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="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
).
<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.