Lightweight Financial Charts Created with HTML5 Canvas

TradingView Lightweight Charts is one of the smallest and fastest HTML5 financial charts.

Light Charts Library is the best choice for you if you want to display financial data as an interactive diagram on your webpage without affecting webpage loading speed and performance.

More options:

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

How to make use of it:

Installation.

# NPM
$ npm install lightweight-charts --save

Import the lightweight-charts as a module.

import { createChart } from 'lightweight-charts';

Or immediately load the complete model of the lightweight-charts from the CDN.

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

Create a brand new Financial Chart occasion and go to the optionally available settings as per your wants.

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

An area chart is another approach to displaying quantitative information.

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 reveals value actions within the type of bars.

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 reveals value actions within the type of candlesticks.

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 sort of chart that shows data as a collection of the info factors related by straight line segments.

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 collection which is a graphical representation of the value distribution.

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 choices.

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’s a possibility to resize it or customize its look 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 '

Available API strategies.

// 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 occasions.

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
});

Lightweight Financial Chart JavaScript Library, Lightweight Charts Plugin/Github