August 15, 2022

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


See Demo And Download

Official Website(tradingview): Click Here

This superior jQuery/javascript plugin is developed by tradingview. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.