<div id="chart-container" class="chart"></div>
.chart {
  width: 100%;
  height: 450px;
}
const URL_DATA =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/stock-chart-with-volume_data.json";
const URL_SCHEMA =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stock-chart-with-volume_schema.json";

const jsonify = (res) => res.json();
const dataFetch = fetch(URL_DATA).then(jsonify);
const schemaFetch = fetch(URL_SCHEMA).then(jsonify);
Promise.all([dataFetch, schemaFetch]).then(([data, schema]) => {
  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    chart: {
      theme: "fusion"
    },
    tooltip: {
      enabled: "true",
      toolText:
        "<div style='color: #393939;'><img src = 'https://logodownload.org/wp-content/uploads/2019/07/nasdaq-logo.png' width ='125' height ='30' /><hr>Open: <b>$series.0.openValue</b><br>High: <b>$series.0.highValue</b><br> Low:<b>$series.0.lowValue</b><br>Close: <b>$series.0.closeValue</b></div>"
    },
    caption: {
      text: "NASDAQ Composite Index"
    },
    subcaption: {
      text: "From February 1971 - November 2018"
    },
    yaxis: [
      {
        plot: [
          {
            value: {
              open: "Open",
              high: "High",
              low: "Low",
              close: "Close"
            },
            type: "ohlc"
          }
        ],
        title: "Index Value"
      }
    ]
  };
  dataSource.data = dataStore.createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataSource: dataSource
  }).render();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/3.17.0/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/3.17.0/themes/fusioncharts.theme.fusion.js