Lightweight Financial Chart JavaScript Library – lightweight-charts

Category: Chart & Graph , Javascript , Recommended | July 19, 2019
Author: tradingview
Views Total: 200
Official Page: Go to website
Last Update: July 19, 2019
License: Apache-2.0

Preview:

Lightweight Financial Chart JavaScript Library – lightweight-charts

Description:

lightweight-charts is a lightweight, dependency-free JavaScript library which 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" }
]);

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

myChart.applyOptions({
  width: 300,
  height: 300,
  localization: {
    dateFormat: 'MM/dd/yy',
    locale: 'en-US',
  },
  priceScale: {
    position: 'left', // left, right, none
    mode: 2,
    autoScale: false,
    invertScale: true,
    alignLabels: false,
    borderVisible: false,
    borderColor: '#555ffd',
    scaleMargins: {
      top: 0.30,
      bottom: 0.25,
    },
  },
  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: 1,
      visible: true,
      labelVisible: false,
    },
    horzLine: {
      color: '#6A5ACD',
      width: 0.5,
      style: 0,
      visible: true,
      labelVisible: true,
    },
    mode: 1,
  },
  grid: {
    vertLines: {
      color: 'rgba(70, 130, 180, 0.5)',
      style: 1,
      visible: true,
    },
    horzLines: {
      color: 'rgba(70, 130, 180, 0.5);',
      style: 1,
      visible: true,
    },
  },
  watermark: {
    color: 'rgba(11, 94, 29, 0.4)',
    visible: true,
    text: 'TradingView Watermark Example',
    fontSize: 24,
    horzAlign: 'left',
    vertAlign: 'bottom',
  },
  layout: {
    backgroundColor: '#FAEBD7',
    textColor: '#696969',
    fontSize: 12,
    fontFamily: 'Calibri',
  },
  candleScroll: {
    mouseWheel: true,
    pressedMouseMove: true,
  },
  handleScale: {
    axisPressedMouseMove: true,
    mouseWheel: true,
    pinch: true,
  }
});

Disable the branding link.

myChart.disableBranding();

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:

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