Lightweight Financial Chart JavaScript Library – lightweight-charts

Preview:

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:

v4.1.1 (10/25/2023)

• Fixed shiftVisibleRangeOnNewBar behaviour for realtime updates to a series. Additionally, a new option allowShiftVisibleRangeOnWhitespaceReplacement has been added if you wish to have the old 4.0 behaviour for when new data replaces existing whitespace.
• When disabling touch scrolling on the chart via either the vertTouchDrag or horzTouchDrag setting in the handleScroll options, any touch scroll events over the corresponding scale will now be ignored so the page can be scrolled.

v4.1.0 (10/05/2023)

• Added point markers styling option for line-based series.
• Added double click subscriber for the main chart pane.
• Added setCrosshairPosition API, allowing programmatic setting of the crosshair position.
• Added an option to disable crosshair. Introduced the Hidden option in the CrosshairMode setting.
• Allow overriding tick mark label length via the tickMarkMaxCharacterLength option.
• Support for overriding the percentage formatter within the localization options.
• Added paneSize getter to IChartApi, returning the dimensions of the chart pane.
• Added options to set minimum dimensions for the price and time scales.
• Bug Fixes

v4.0.1 (03/21/2023)

• Add the ability to specify font colour for the Priceline labels.
• Ignore resize method if autoSize is active, and added API to check if active.
• Bug fixes

v3.8.0 (02/17/2022)

• Quick tracking mode
• Improved mouse behaviour on touch devices (like mouse connected to mobile phone/tablet)
• Custom color for items of candlestick and line series
• Labels might be cut off when disabling scale and scroll
• Add ability to disable visibility of price line line
• Bugs Fixed

v3.7.0 (11/08/2021)

• The new baseline series chart
• Added methods to get time axis size and subscribe on size change
• Improved performance of setting/updating series data
• Use lowerbound in TimeScale timeToIndex search
• Increased min price tick mark step up to 1e-14
• Do not paint time axis if it not visible
• Remove color customisation from settings.json

v3.6.1 (09/13/2021)

• Bugfix

v3.6.0 (09/10/2021)

• Gradient chart background color
• How to add buffer animation to price jump
• Kinetic scroll
• Fixed bugs

v3.5.0 (08/04/2021)

• Bugs fixed

v3.4.0 (07/21/2021)

• Add option to fix right edge
• Drop restriction for min bar spacing value
• Round corners of the line-style plots
• Bugs fixed

v3.3.0 (02/01/2021)

• Add type predicates for series type
• Create Grid instance for every pane
• Add possibility to chose crosshairMarker color, so it will be independent from line-series color
• Implement option not to shift the time scale at all when data is added with setData
• Incorrect bar height when its value is more than chart’s height
• Disabling autoScale for non-visible series

v3.2.0 (07/30/2020)

• Feat/gzip friendly colors
• Add coordinateToLogical and logicalToCoordinate
• Add API to show/hide series without removing it
• Add run-time validation of inputs in debug mode
• Pixel perfect renderers fixes
• Add title option to createPriceLine
• Bugfixes

v3.1.4/5 (07/30/2020)

• Bugfix

v3.1.3 (07/21/2020)

• Fixed handleScroll and handleScale options aren’t applied

v3.1.2 (07/07/2020)

• Fixed Crosshair doesn’t work on touch devices

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