StockLift Charts

Demo Site

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.

包详细信息