Lightweight Financial Chart JavaScript Library – lightweight-charts

Category: Chart & Graph , Javascript , Recommended | June 30, 2020
Author: tradingview
Views Total: 60 views
Official Page: Go to website
Last Update: June 30, 2020
License: Apache-2.0

Preview:

Lightweight Financial Chart JavaScript Library – lightweight-charts

Description:

lightweight-charts is a lightweight, dependency-free JavaScript library that helps developers to create responsive, interactive, touch-friendly financial charts using JavaScript and HTML5 canvas.

More features:

  • Bar chart
  • Candlestick chart
  • Line chart
  • Area chart
  • Histogram
  • Custom font family
  • Custom price formatter
  • Custom locale
  • Custom themes: Dark and Light
  • Custom watermark
  • Fit content
  • Floating tooltip
  • Tracking tooltip
  • Go to realtime button
  • Interval switcher
  • Intraday data
  • Percentage price scale
  • Inverted price scale
  • Logarithmic price scale
  • No time scale
  • Price scale at left
  • No price scale
  • Realtime emulation
  • Volume study

Basic usage:

Installation.

# NPM
$ npm install lightweight-charts --save

Import the lightweight-charts as a moduel.

import { createChart } from 'lightweight-charts';

Or directly load the full version of the lightweight-charts from the CDN.

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

Create a new Financial Chart instance and pass the optional settings as per your needs. You can specify the target container in which you want to place the financial chart by overriding the first parameter

const myChart = createChart(document.body, { 
      // options here
});

Create an area chart. An area chart is another way of displaying quantitative data. It’s basically a colored area between the line connecting all data points and time axes. An area series has a crosshair marker – a round mark which is moving along the series’ line while the cursor is moving on a chart along the timescale.

const areaSeries = myChart.addAreaSeries({
      topColor: 'rgba(21, 146, 230, 0.4)',
      bottomColor: 'rgba(21, 146, 230, 0)',
      lineColor: 'rgba(21, 146, 230, 1)',
      lineStyle: 0,
      lineWidth: 3,
      crosshairMarkerVisible: false,
      crosshairMarkerRadius: 3,
});

// set the data
areaSeries.setData([
  { time: "2018-12-22", value: 32.51 },
  { time: "2018-12-23", value: 31.11 },
  { time: "2018-12-24", value: 27.02 },
  { time: "2018-12-25", value: 27.32 },
  { time: "2018-12-26", value: 25.17 },
  { time: "2018-12-27", value: 28.89 },
  { time: "2018-12-28", value: 25.46 },
  { time: "2018-12-29", value: 23.92 },
  { time: "2018-12-30", value: 22.68 },
  { time: "2018-12-31", value: 22.67 },
]);

Create a bar chart that shows price movements in the form of bars. Vertical line length of a bar is limited by the highest and lowest price values. Open & Close values are represented by tick marks, on the left & right hand side of the bar respectively.

const barSeries = myChart.addBarSeries({
      thinBars: false,
      upColor: 'rgba(37, 148, 51, 0.2)',
      downColor: 'rgba(191, 55, 48, 0.2)',
      openVisible: true,
});

barSeries.setData([
  { time: "2018-12-19", open: 141.77, high: 170.39, low: 120.25, close: 145.72 },
  { time: "2018-12-20", open: 145.72, high: 147.99, low: 100.11, close: 108.19 },
  { time: "2018-12-21", open: 108.19, high: 118.43, low: 74.22, close: 75.16 },
  { time: "2018-12-22", open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: "2018-12-23", open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
  { time: "2018-12-24", open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
  { time: "2018-12-25", open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
  { time: "2018-12-26", open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
  { time: "2018-12-27", open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
  { time: "2018-12-28", open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
  { time: "2018-12-29", open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
  { time: "2018-12-30", open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
  { time: "2018-12-31", open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

Create a candlestick chart that shows price movements in the form of candlesticks. On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick’s time interval.

const candleSeries = myChart.addCandleSeries({
      upColor: '#6495ED',
      downColor: '#FF6347',
      borderVisible: false,
      wickVisible: true,
      borderColor: '#000000',
      wickColor: '#000000',
      borderUpColor: '#4682B4',
      borderDownColor: '#A52A2A',
      wickUpColor: "#4682B4",
      wickDownColor: "#A52A2A",
  });

candleSeries.setData([
  { time: "2018-12-19", open: 141.77, high: 170.39, low: 120.25, close: 145.72 },
  { time: "2018-12-20", open: 145.72, high: 147.99, low: 100.11, close: 108.19 },
  { time: "2018-12-21", open: 108.19, high: 118.43, low: 74.22, close: 75.16 },
  { time: "2018-12-22", open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: "2018-12-23", open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
  { time: "2018-12-24", open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
  { time: "2018-12-25", open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
  { time: "2018-12-26", open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
  { time: "2018-12-27", open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
  { time: "2018-12-28", open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
  { time: "2018-12-29", open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
  { time: "2018-12-30", open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
  { time: "2018-12-31", open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

Create a line chart. A line chart is a type of chart that displays information as series of the data points connected by straight line segments. Line series has a crosshair marker – a round mark which is moving along the series’ line while the cursor is moving along the timescale.

const lineSeries = myChart.addLineSeries({
      color: '#f48fb1',
      lineStyle: 0,
      lineWidth: 1,
      drawCrosshairMarker: true,
      crosshairMarkerRadius: 6,
      lineType: 1,
});

// set data
lineSeries.setData([
  { time: "2018-12-01", value: 32.51 },
  { time: "2018-12-02", value: 31.11 },
  { time: "2018-12-03", value: 27.02 },
  { time: "2018-12-04", value: 27.32 },
  { time: "2018-12-05", value: 25.17 },
  { time: "2018-12-06", value: 28.89 },
  { time: "2018-12-07", value: 25.46 },
  { time: "2018-12-08", value: 23.92 },
  { time: "2018-12-09", value: 22.68 },
  { time: "2018-12-10", value: 22.67 },
  { time: "2018-12-11", value: 27.57 },
  { time: "2018-12-12", value: 24.11 },
  { time: "2018-12-13", value: 30.74 },
]);

Create a histogram series which is a graphical representation of the value distribution. Histogram creates intervals (columns) and counts how many values fall into each column.

const histogramSeries = myChart.addHistogramSeries({
      color: '#FFF5EE',
      base: 5,
});

// set the data
histogramSeries.setData([
  { time: "2018-12-20", value: 20.31, color: "#ff00ff" },
  { time: "2018-12-21", value: 30.27, color: "#ff00ff" },
  { time: "2018-12-22", value: 70.28, color: "#ff00ff" },
  { time: "2018-12-23", value: 49.29, color: "#ff0000" },
  { time: "2018-12-24", value: 40.64, color: "#ff0000" },
  { time: "2018-12-25", value: 57.46, color: "#ff0000" },
  { time: "2018-12-26", value: 50.55, color: "#0000ff" },
  { time: "2018-12-27", value: 34.85, color: "#0000ff" },
  { time: "2018-12-28", value: 56.68, color: "#0000ff" },
  { time: "2018-12-29", value: 51.60, color: "#00ff00" },
  { time: "2018-12-30", value: 75.33, color: "#00ff00" },
  { time: "2018-12-31", value: 54.85, color: "#00ff00" }
]);

Common options.

const lineSeries = chart.addLineSeries({

      // or right
      priceScaleId: 'left', 

      // chart title
      title: 'Series title example',

      // top & bottom margins
      scaleMargins: {
        top: 0.1,
        bottom: 0.3,
      },

      // overrides autoscale
      autoscaleInfoProvider: () => {
        return {
            priceRange: {
                minValue: 0,
                maxValue: 100,
            },
        };
      },

});

Once a chart has been created, there is a possibility to resize it or customize its appearance and behavior by calling applyOptions.

mySeries.applyOptions({
  priceLineVisible: false,
  priceLineSource: 1, // 1. LastBar; 2. LastVisible
  priceLineWidth: 2,
  priceLineColor: '#4682B4',
  priceLineStyle: 3,
  lastValueVisible: false,
  baseLineVisible: true,
  baseLineColor: '#ff0000',
  baseLineWidth: 3,
  baseLineStyle: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted
  priceFormat: {
    type: 'price', // price | volume | percent | custom
    minMove: 0.01,
    precision: 2,
    formatter: (price) => {
      return '$' + price.toFixed(2);
    },
  }
  width: 300,
  height: 300,
  layout: {
    backgroundColor: '#FAEBD7',
    textColor: '#696969',
    fontSize: 12,
    fontFamily: 'Calibri',
  },
  localization: {
    dateFormat: 'MM/dd/yy',
    locale: 'en-US',
  },
  timeScale: {
    rightOffset: 12,
    barSpacing: 3,
    fixLeftEdge: true,
    lockVisibleTimeRangeOnResize: true,
    rightBarStaysOnScroll: true,
    borderVisible: false,
    borderColor: '#fff000',
    visible: true,
    timeVisible: true,
  },
  crosshair: {
    vertLine: {
      color: '#6A5ACD',
      width: 0.5,
      style: 4, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted
      visible: true,
      labelVisible: false,
    },
    horzLine: {
      color: '#6A5ACD',
      width: 0.5,
      style: 4, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted
      visible: true,
      labelVisible: true,
    },
    mode: 1, // 1. Magnet; 2. Normal
  },
  grid: {
    vertLines: {
      color: 'rgba(70, 130, 180, 0.5)',
      style: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted
      visible: true,
    },
    horzLines: {
      color: 'rgba(70, 130, 180, 0.5);',
      style: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted
      visible: true,
    },
  },
  overlayPriceScales: {
    autoScale: true,
    mode: PriceScaleMode.Normal,
    invertScale: false,
    alignLabels: true,
    borderVisible: true,
    borderColor: '#2B2B43',
    entireTextOnly: false,
    visible: false,
    drawTicks: true,
    scaleMargins: {
      bottom: 0.1,
      top: 0.2,
    },
  },
  leftPriceScale: {
    autoScale: true,
    mode: PriceScaleMode.Normal,
    invertScale: false,
    alignLabels: true,
    borderVisible: true,
    borderColor: '#2B2B43',
    entireTextOnly: false,
    visible: false,
    drawTicks: true,
    scaleMargins: {
      bottom: 0.1,
      top: 0.2,
    },
    visible: false,
  },
  rightPriceScale: {
    autoScale: true,
    mode: PriceScaleMode.Normal,
    invertScale: false,
    alignLabels: true,
    borderVisible: true,
    borderColor: '#2B2B43',
    entireTextOnly: false,
    visible: false,
    drawTicks: true,
    scaleMargins: {
      bottom: 0.1,
      top: 0.2,
    },
    visible: false,
  },
  watermark: {
    color: 'rgba(11, 94, 29, 0.4)',
    visible: true,
    text: 'TradingView Watermark Example',
    fontSize: 24,
    horzAlign: 'left',
    vertAlign: 'bottom',
  },
  handleScroll: {
    mouseWheel: true,
    pressedMouseMove: true,
    horzTouchDrag: true,
    vertTouchDrag: true,
  },
  handleScale: {
    axisPressedMouseMove: {
      time: true,
      price: true,
    },
    axisDoubleClickReset: true,
    mouseWheel: true,
    pinch: true,
  }
});

Available API methods.

// update
myChart.update(data);

// set markers
myChart.setMarkers([
  {
      time: '2019-04-09',
      position: 'aboveBar',
      color: 'black',
      shape: 'arrowDown',
  },
  {
      time: '2019-05-31',
      position: 'belowBar',
      color: 'red',
      shape: 'arrowUp',
      id: 'id3',
  },
  {
      time: '2019-05-31',
      position: 'belowBar',
      color: 'orange',
      shape: 'arrowUp',
      id: 'id4',
      text: 'example',
      size: 2,
  },
]);
myChart.subscribeCrosshairMove((param) => {
    console.log(param.hoveredMarkerId);
});
myChart.subscribeClick((param) => {
    console.log(param.hoveredMarkerId);
});

// create a horizontal price line at a certain price level.
const priceLine = mySeries.createPriceLine({
      price: 80.0,
      color: 'green',
      lineWidth: 2,
      lineStyle: LightweightCharts.LineStyle.Dotted,
      axisLabelVisible: true,
});

// remove the price line
myChart.removePriceLine(priceLine);

// returns bars information for the series in the provided logical range or null
// if no series data has been found in the requested range
const barsInfo = mySeries.barsInLogicalRange(chart.timeScale().getVisibleLogicalRange());
console.log(barsInfo);

// take a screenshot
myChart.takeScreenshot();

// two functions to access this price scale implicitly
const coordinate = series.priceToCoordinate(100.5);
const price = series.coordinateToPrice(324);

Available events.

myChart.subscribeClick(function(param){
  console.log(`An user clicks at (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
});

myChart.unsubscribeClick(function(param){
  // Don’t get notified when a mouse clicks on a chart
});

myChart.subscribeCrosshairMove(function(param){
  if (!param.point) {
    return;
  }
  console.log(`A user moved the crosshair to (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
});

myChart.unsubscribeCrosshairMove(function(param){
  // Don’t get notified when a mouse moves on a chart
});

Changelog:

v3.1.1 (06/30/2020)

  • Fixed production build of 3.1 version

v3.1.0 (06/29/2020)

  • Whitespaces support
  • Custom font families for watermarks
  • Bugfix

v3.0.1 (06/15/2020)

  • Correctly handle overlay: true in series options while create series to backward compact

v3.0.0 (06/11/2020)

  • Methods subscribeVisibleTimeRangeChange and unsubscribeVisibleTimeRangeChange has been moved from ChartApi to TimeScaleApi
  • Since 3.0 you can specify price axis you’d like to place the series on. The same for moving the series between price scales
  • Added ability to customize time scale tick marks formatter
  • Added ability to put text for series markers
  • Added ability to specify your own date formatter
  • Improved tick marks generation algorithm for the first point
  • Made inbound types weakly (outbound ones should be strict)
  • Removed non-exported const enum’s JS code
  • Add ability to override series’ autoscale range
  • Add API to get price scale’s width
  • Disabling/enabling scaling axis for both price and time
  • Get screen coordinate by a time point
  • Remove tick mark from price label
  • Support the second price axis
  • Visible time range should have bars count of the space from left/right
  • Bugs fixed

v2.1.0 (05/31/2020)

  • fixed 443 error while updating time scale

v2.0.0 (02/26/2020)

  • Removed unused lineWidth property from HistogramStyleOptions interface (it affects nothing, but could break your compilation)
  • Changed order of width and height args in resize method
  • Pattern for all non-solid (dotted, dashed, large dashed and sparse dotted) line styles was a bit changed
  • Pixel-perfect rendering
  • Time scale enhancements
  • Disable all kinds of scrolls and touch with one option
  • Added to the acceptable date formats
  • Add option to show the “global” last value of the series instead of the last visible
  • Bugfixed

v1.2.2 (02/22/2020)

  • Fixed bug while rendering few datasets with not equal timescale

v1.2.1 (11/28/2019)

  • Add custom price lines
  • Migrate canvas-related logic to fancy-canvas library
  • Add coordinateToPrice method to ISeriesApi
  • Bugs fixed

v1.1.0 (08/30/2019)

  • Apply localization to specific series
  • Series-based markers
  • Reduced size of the library by using ts-transformer-minify-privates transformer
  • Bugs fixed

07/19/2019

  • Fixed: The histogram last bar not hide in chart

07/19/2019

  • Fixed: The histogram last bar not hide in chart

07/11/2019

  • Fixed: Setting the data to series fails after setting the data to histogram series with custom color

You Might Be Interested In:


Leave a Reply