StockLift Charts SDK

View live demo

Introduction

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. It allows navigation between these views using "Next" and "Back" buttons.

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. 

<script type="module" src="https://cdn.skypack.dev/stocklift-charts@v^1.0.0"></script>

Specifying Versions

You can specify the version of the stocklift-charts component by including the version number in the CDN URL. For example: 

<script type="module" src="https://cdn.skypack.dev/stocklift-charts@1.0.0"></script>

If no version is specified, the latest version will be used.

Usage

Basic Usage

To use the stocklift-charts component, you need to initialize it with a configuration object.

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>

Example

Here is a complete example of how to use the stocklift-charts component: 

<!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;
      --stocklift-button-color: var(--stocklift-button-color);
      --stocklift-button-hover-color: var(--stocklift-button-hover-color);
      --stocklift-background-color: var(--stocklift-background-color);
      --stocklift-text-color: var(--stocklift-text-color);
      display: block;
      margin: 0 auto;
    }
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script type="module" src="https://cdn.skypack.dev/stocklift-charts"></script>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const config = {
        accessToken: "your-access-token",
        companyName: "Your Company",
        clientId: "client-id",
        clientName: "Client Name",
        clientEmail: "client@example.com",
      }

      const stockliftCharts = document.createElement("stocklift-charts")
      stockliftCharts.config = config

      // Apply styles from style.css
      stockliftCharts.style.setProperty('--stocklift-button-color', 'var(--stocklift-button-color)')
      stockliftCharts.style.setProperty('--stocklift-button-hover-color', 'var(--stocklift-button-hover-color)')
      stockliftCharts.style.setProperty('--stocklift-background-color', 'var(--stocklift-background-color)')
      stockliftCharts.style.setProperty('--stocklift-text-color', 'var(--stocklift-text-color)')

      const chartDiv = document.getElementById("chart")
      chartDiv.appendChild(stockliftCharts)
    })
  </script>
</body>
</html>

Initialization with JavaScript

You can also initialize the stocklift-charts component using JavaScript. Here is an example: 

document.addEventListener("DOMContentLoaded", () => {
  const config = {
    accessToken: "your-access-token",
    companyName: "Your Company",
    clientId: "client-id",
    clientName: "Client Name",
    clientEmail: "client@example.com",
  }

  const stockliftCharts = document.createElement("stocklift-charts")
  stockliftCharts.config = config

  // Apply styles from style.css
  stockliftCharts.style.setProperty('--stocklift-button-color', 'var(--stocklift-button-color)')
  stockliftCharts.style.setProperty('--stocklift-button-hover-color', 'var(--stocklift-button-hover-color)')
  stockliftCharts.style.setProperty('--stocklift-background-color', 'var(--stocklift-background-color)')
  stockliftCharts.style.setProperty('--stocklift-text-color', 'var(--stocklift-text-color)')

  const chartDiv = document.getElementById("chart")
  chartDiv.appendChild(stockliftCharts)
})

This script initializes the stocklift-charts component with the configuration and applies the styles defined in style.css.