Browser Sparkline Chart

Browser sparkline chart is a canvas chart component that supports both static data drawing mode and automatic retrieve the data from Refinitiv Data Platform.

Open Demo Page

  npm run start

Normal usage

Browser sparkline chart can be added to your app as per any web component.

  <browser-sparkline-chart id="chart"></browser-sparkline-chart>

  const chart = document.getElementById('chart');
  chart.config = {
    themeConfig: {
      lineWidth: 1,
      upperLineColor: '#39C46E',
      lowerLineColor: '#D94255',
    },
    requestData: {
      ric: 'A',
      interval: '1H',
      timeFrame: '2D',
      view: 'BID',
    }
  };

For chart configuration, you can use these configuration preperties below (All these properties can be optional)

• themeConfig - Theme config
• staticData - Create the chart with static data without retrieve the data from Refinitiv Data Platform
• requestData - Create the chart with retrieve the data from Refinitiv Data Platform

themeConfig Preperties: Customise size, colors and line width

  const chart = document.getElementById('chart');
  chart.config = {
    themeConfig: {
      width: 200,
      height: 100,
      lineWidth: 1,
      referenceLineColor: '#4D4D4D',
      previousLineColor: '#BFBFBF',
      upperLineColor: '#39C46E',
      lowerLineColor: '#D94255',
      fillColorStyle: 'solid'
    },
  };

All these properties can be optional

• width - Chart width
• height - Chart height
• lineWidth - Line width
• referenceLineColor - Reference/threshold line color
• previousLineColor - Color of line that plot from previousData
• upperLineColor - Color of line that higher than the reference value
• lowerLineColor - Color of line that lower than the reference value
• fillColorStyle - Color area below/above the line (gradient | solid | none). The default style is gradient.

staticData Preperties

Create the chart with static data without retrieve the data from Refinitiv Data Platform.

  const chart = document.getElementById('chart');
  chart.config = {
    staticData: {
      referenceValue: 0,
      previousData: [-3, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6],
      data: [-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 5, 0, 3, 2, 3]
    },
  };

• referenceValue (optional) - A threshold line value. The area above or below the threshold line will be filled with different colors.
• previousData (optional) - The previousData will use for draw the chart. The line color the line will be below or above the threshold line. The default color is grey
• data - The data will use for draw the chart. The line color depend on area above or below the threshold line. The default upper color is green and lower color is red

requestData Preperties:

Automatically retrieve the data from Refinitiv Data Platform

Prior to the usage of Browser Spakline Chart with streaming value with view preperty, ensure your project include RTK with Quotes plugin. Quotes plugin is required for obtaining real-time market data to add the lastest data point to the chart when the current day is trading day.

  const chart = document.getElementById('chart');
  chart.config = {
    requestData: {
      ric: 'A',
      timeFrame: '5D',
      view: 'YIELD',
    },
  };

• ric - RIC name

• timeFrame (optional) - Time range to retrieve the data from Refinitiv Data Platform API for display on the sparkline chart. The default timeFrame is 2D.

  • H (hour)
  • TODAY
  • D (day)
  • W (week)
  • M (month)
  • Y (year)
  • YTD (year to date)

• interval (optional) - Calendar day interval to retrieve the data from Refinitiv Data Platform API. The default interval is 1H.

  • 1 (minutely)
  • 60 (hourly or 60 minutes)
  • 1H or H (hourly)
  • 1D or D (daily)
  • 1W or W (weekly)
  • 1M or M (monthly)
  • 1Q or Q (quaterly)
  • 1S or S (semiyearly)
  • 1Y or Y (yearly)

• previousLine (optional) - Range of previous data to draw sparkline with previous line color. PreviousLine use the same pattern as timeFrame. The default previousLine value is 0D. For example:

  const chart = document.getElementById('chart');
  chart.config = {
    requestData: {
      ric: 'A',
      timeFrame: '5D',
      previousLine: '2D',
    },
  };

In this case DAY1 - DAY2 data points will be previous line color and DAY3 - DAY5(today) data points will be normal line color.

• view (optional) - View preperty required RTK with Quotes plugin to subscribe to add on the chart. The default value is depend on default view from Time Series backend service or the custom endpoint from defaultViewUrl.

• defaultViewUrl (optional) - Url endpoint is required to get the default view ('BID', 'BID_YIELD', etc.) to subscribe quote to use for streaming point. The default url is /Apps/TAService/GetMetaData/.

• dataPointUrl (optional) - Url endpoint is required to get the initial data point to add on the chart. The default url is /Apps/TAService/GetTimeSeries.

• autoFetch (optional) - Auto fetch is a flag that's set to handle about re-fetching the data from the server when RTK with Quotes plugin isn't available. The default value is true

Resize Sparkline Chart

Browser sparkline chart have public medthod to update browser-sparkline-canvas size. Default width is 100px and default height is 30px.

  const chart = document.getElementById('chart');
  chart.updateCanvasSize(200, 100);