<div class="container-fluid">
  <div class="card shadow mt-3 mb-3 mr-2 ml-2">
    <div class="card-body">
      <div id="chart-container"></div>
    </div>
  </div>
.shadow {
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}

*:focus {
  outline: none;
}

#chart-container {
  width: 100%;
  height: 450px;
}
"use strict";

var schema = [
  {
    name: "Date",
    type: "date",
    format: "%-d/%-m/%Y"
  },
  {
    name: "Low",
    type: "number"
  },
  {
    name: "High",
    type: "number"
  },
  {
    name: "Mean",
    type: "number"
  }
];

var data = [
  ["1/1/2019", "41", "60", "51"],
  ["2/1/2019", "35", "41", "37.7"],
  ["3/1/2019", "39", "45", "41.9"],
  ["4/1/2019", "37", "47", "42.4"],
  ["5/1/2019", "42", "47", "43.9"],
  ["6/1/2019", "32", "49", "42.6"],
  ["7/1/2019", "26", "35", "29.8"],
  ["8/1/2019", "36", "46", "42.6"],
  ["9/1/2019", "35", "46", "42.5"],
  ["10/1/2019", "30", "35", "32.9"],
  ["11/1/2019", "22", "31", "26.6"],
  ["12/1/2019", "22", "34", "28.1"],
  ["13/1/2019", "25", "33", "29.2"],
  ["14/1/2019", "22", "33", "27.7"],
  ["15/1/2019", "26", "35", "30.8"],
  ["16/1/2019", "31", "40", "35.4"],
  ["17/1/2019", "26", "33", "29.7"],
  ["18/1/2019", "28", "40", "34"],
  ["19/1/2019", "33", "37", "35.3"],
  ["20/1/2019", "16", "40", "33.3"],
  ["21/1/2019", "6", "15", "11.6"],
  ["22/1/2019", "14", "31", "23.4"],
  ["23/1/2019", "30", "46", "37.8"],
  ["24/1/2019", "35", "57", "50"],
  ["25/1/2019", "29", "39", "35.4"],
  ["26/1/2019", "25", "34", "30.1"],
  ["27/1/2019", "30", "49", "40"],
  ["28/1/2019", "25", "38", "29.3"],
  ["29/1/2019", "26", "44", "35.4"],
  ["30/1/2019", "7", "35", "23.6"],
  ["31/1/2019", "4", "16", "10.5"],
  ["1/2/2019", "12", "22", "17.3"],
  ["2/2/2019", "18", "35", "26.8"],
  ["3/2/2019", "32", "52", "40.7"],
  ["4/2/2019", "38", "58", "46.7"],
  ["5/2/2019", "38", "64", "50.3"],
  ["6/2/2019", "35", "44", "40"],
  ["7/2/2019", "37", "43", "41.4"],
  ["8/2/2019", "33", "54", "43.3"],
  ["9/2/2019", "24", "32", "28.5"],
  ["10/2/2019", "24", "35", "30.3"],
  ["11/2/2019", "31", "37", "34.2"],
  ["12/2/2019", "26", "36", "30.5"],
  ["13/2/2019", "34", "41", "36.3"],
  ["14/2/2019", "33", "45", "38.9"],
  ["15/2/2019", "41", "55", "47.9"],
  ["16/2/2019", "32", "44", "38.2"],
  ["17/2/2019", "26", "36", "32.1"],
  ["18/2/2019", "27", "41", "34.1"],
  ["19/2/2019", "24", "36", "29.4"],
  ["20/2/2019", "26", "32", "28.4"],
  ["21/2/2019", "32", "51", "39.5"],
  ["22/2/2019", "37", "43", "40"],
  ["23/2/2019", "32", "38", "35.9"],
  ["24/2/2019", "35", "47", "40.6"],
  ["25/2/2019", "28", "43", "37.4"],
  ["26/2/2019", "25", "36", "29.2"],
  ["27/2/2019", "23", "29", "26.1"],
  ["28/2/2019", "27", "35", "29.9"],
  ["1/3/2019", "26", "34", "29.9"],
  ["2/3/2019", "30", "40", "34.6"],
  ["3/3/2019", "32", "41", "36"],
  ["4/3/2019", "29", "38", "34.1"],
  ["5/3/2019", "21", "31", "26.7"],
  ["6/3/2019", "19", "26", "22.7"],
  ["7/3/2019", "19", "32", "25.7"],
  ["8/3/2019", "24", "37", "32"],
  ["9/3/2019", "34", "47", "39.3"],
  ["10/3/2019", "34", "45", "38.3"],
  ["11/3/2019", "39", "52", "46.9"],
  ["12/3/2019", "34", "42", "37.5"],
  ["13/3/2019", "33", "45", "38.7"],
  ["14/3/2019", "41", "57", "47.7"],
  ["15/3/2019", "48", "71", "57.5"],
  ["16/3/2019", "37", "56", "46.1"],
  ["17/3/2019", "34", "45", "38.2"],
  ["18/3/2019", "33", "46", "39.2"],
  ["19/3/2019", "36", "48", "41.8"],
  ["20/3/2019", "38", "51", "44.2"],
  ["21/3/2019", "40", "45", "41.6"],
  ["22/3/2019", "38", "48", "43.3"],
  ["23/3/2019", "35", "47", "40.7"],
  ["24/3/2019", "39", "60", "50.5"],
  ["25/3/2019", "42", "57", "49.8"],
  ["26/3/2019", "33", "48", "40.9"],
  ["27/3/2019", "34", "44", "38.8"],
  ["28/3/2019", "37", "50", "44"],
  ["29/3/2019", "47", "59", "53.2"],
  ["30/3/2019", "46", "63", "54.6"],
  ["31/3/2019", "41", "59", "50.5"],
  ["1/4/2019", "34", "45", "39.9"],
  ["2/4/2019", "38", "49", "43.6"],
  ["3/4/2019", "41", "67", "51.9"],
  ["4/4/2019", "44", "58", "50.3"],
  ["5/4/2019", "39", "42", "39.5"],
  ["6/4/2019", "39", "66", "49.8"],
  ["7/4/2019", "47", "63", "55.5"],
  ["8/4/2019", "47", "78", "57.1"],
  ["9/4/2019", "43", "50", "45.8"],
  ["10/4/2019", "45", "58", "51.1"],
  ["11/4/2019", "40", "51", "45.2"],
  ["12/4/2019", "45", "66", "54.1"],
  ["13/4/2019", "58", "74", "64.1"],
  ["14/4/2019", "55", "68", "60.4"],
  ["15/4/2019", "45", "62", "54.7"],
  ["16/4/2019", "44", "62", "53"],
  ["17/4/2019", "47", "59", "52.6"],
  ["18/4/2019", "51", "63", "55.5"],
  ["19/4/2019", "56", "75", "62.9"],
  ["20/4/2019", "54", "63", "59.4"],
  ["21/4/2019", "52", "63", "56.6"],
  ["22/4/2019", "50", "60", "55.3"],
  ["23/4/2019", "55", "74", "62.7"],
  ["24/4/2019", "55", "67", "63"],
  ["25/4/2019", "49", "62", "54.5"],
  ["26/4/2019", "51", "59", "53.6"],
  ["27/4/2019", "48", "57", "52.9"],
  ["28/4/2019", "46", "52", "49.5"],
  ["29/4/2019", "44", "57", "50.4"],
  ["30/4/2019", "48", "55", "50.4"],
  ["1/5/2019", "48", "54", "50.7"],
  ["2/5/2019", "46", "70", "55.1"],
  ["3/5/2019", "48", "52", "50"],
  ["4/5/2019", "50", "66", "55.3"],
  ["5/5/2019", "49", "54", "51.1"],
  ["6/5/2019", "49", "66", "56.2"],
  ["7/5/2019", "52", "64", "57.7"],
  ["8/5/2019", "55", "67", "59.2"],
  ["9/5/2019", "52", "59", "55.4"],
  ["10/5/2019", "56", "73", "64"],
  ["11/5/2019", "57", "69", "62.6"],
  ["12/5/2019", "44", "58", "48.5"],
  ["13/5/2019", "42", "49", "46.7"],
  ["14/5/2019", "44", "50", "47.1"],
  ["15/5/2019", "47", "67", "56.3"],
  ["16/5/2019", "56", "73", "64.2"],
  ["17/5/2019", "63", "78", "70.5"],
  ["18/5/2019", "59", "74", "64.3"],
  ["19/5/2019", "60", "75", "68"],
  ["20/5/2019", "65", "88", "77.5"],
  ["21/5/2019", "58", "71", "64.2"],
  ["22/5/2019", "58", "76", "66.6"],
  ["23/5/2019", "58", "74", "66.8"],
  ["24/5/2019", "64", "73", "69.3"],
  ["25/5/2019", "57", "70", "63"],
  ["26/5/2019", "63", "88", "74.4"],
  ["27/5/2019", "66", "80", "73.8"],
  ["28/5/2019", "62", "70", "67.2"],
  ["29/5/2019", "56", "66", "59.4"],
  ["30/5/2019", "57", "67", "61.8"],
  ["31/5/2019", "62", "81", "71.6"],
  ["1/6/2019", "63", "79", "69.7"],
  ["2/6/2019", "63", "83", "70"],
  ["3/6/2019", "60", "71", "65.5"],
  ["4/6/2019", "57", "73", "65.7"],
  ["5/6/2019", "66", "81", "73"],
  ["6/6/2019", "71", "82", "76.2"],
  ["7/6/2019", "64", "80", "70.8"],
  ["8/6/2019", "64", "80", "70.6"],
  ["9/6/2019", "61", "78", "67.4"],
  ["10/6/2019", "60", "70", "64"],
  ["11/6/2019", "64", "76", "69.5"],
  ["12/6/2019", "62", "74", "67.3"],
  ["13/6/2019", "58", "64", "62.1"],
  ["14/6/2019", "61", "75", "67"],
  ["15/6/2019", "63", "84", "74.4"],
  ["16/6/2019", "68", "82", "75.4"],
  ["17/6/2019", "70", "75", "72.8"],
  ["18/6/2019", "65", "75", "70.1"],
  ["19/6/2019", "64", "71", "67.3"],
  ["20/6/2019", "62", "78", "70.2"],
  ["21/6/2019", "65", "77", "69.5"],
  ["22/6/2019", "63", "79", "72.4"],
  ["23/6/2019", "67", "86", "76.8"],
  ["24/6/2019", "70", "86", "78"],
  ["25/6/2019", "72", "85", "76.3"],
  ["26/6/2019", "69", "90", "78.8"],
  ["27/6/2019", "73", "89", "82.2"],
  ["28/6/2019", "73", "92", "82.7"],
  ["29/6/2019", "76", "93", "82.1"],
  ["30/6/2019", "72", "83", "77.6"],
  ["1/7/2019", "68", "86", "77.9"],
  ["2/7/2019", "75", "88", "81.1"],
  ["3/7/2019", "76", "86", "81.1"],
  ["4/7/2019", "71", "91", "80.5"],
  ["5/7/2019", "72", "85", "79"],
  ["6/7/2019", "77", "92", "83.1"],
  ["7/7/2019", "73", "85", "78.4"],
  ["8/7/2019", "70", "81", "74.7"],
  ["9/7/2019", "72", "89", "80.9"],
  ["10/7/2019", "76", "90", "83.3"],
  ["11/7/2019", "74", "86", "78.2"],
  ["12/7/2019", "74", "88", "79.2"],
  ["13/7/2019", "72", "89", "80.6"],
  ["14/7/2019", "78", "91", "84.1"],
  ["15/7/2019", "72", "88", "80.4"],
  ["16/7/2019", "73", "93", "83.8"],
  ["17/7/2019", "73", "94", "83.3"],
  ["18/7/2019", "71", "78", "74.8"],
  ["19/7/2019", "71", "94", "81.3"],
  ["20/7/2019", "84", "98", "91.5"],
  ["21/7/2019", "84", "99", "90.8"],
  ["22/7/2019", "74", "89", "80.3"],
  ["23/7/2019", "68", "76", "71.5"],
  ["24/7/2019", "70", "85", "76.7"],
  ["25/7/2019", "72", "85", "78.6"],
  ["26/7/2019", "72", "86", "79.7"],
  ["27/7/2019", "75", "86", "80.3"],
  ["28/7/2019", "76", "92", "84.3"],
  ["29/7/2019", "78", "93", "86.4"],
  ["30/7/2019", "81", "94", "86.6"],
  ["31/7/2019", "72", "90", "79.1"],
  ["1/8/2019", "73", "87", "80.5"],
  ["2/8/2019", "74", "86", "78.3"],
  ["3/8/2019", "70", "86", "79.2"],
  ["4/8/2019", "71", "87", "79.3"],
  ["5/8/2019", "71", "81", "76"],
  ["6/8/2019", "72", "82", "75.4"],
  ["7/8/2019", "71", "84", "77.1"],
  ["8/8/2019", "71", "91", "77.3"],
  ["9/8/2019", "72", "85", "78.3"],
  ["10/8/2019", "70", "82", "76"],
  ["11/8/2019", "68", "82", "75.8"],
  ["12/8/2019", "73", "88", "80.3"],
  ["13/8/2019", "76", "80", "77.7"],
  ["14/8/2019", "72", "82", "75.8"],
  ["15/8/2019", "72", "84", "75.6"],
  ["16/8/2019", "70", "81", "75.3"],
  ["17/8/2019", "73", "85", "77.1"],
  ["18/8/2019", "75", "90", "80.2"],
  ["19/8/2019", "75", "92", "83.1"],
  ["20/8/2019", "76", "88", "81.6"],
  ["21/8/2019", "78", "90", "81.8"],
  ["22/8/2019", "72", "92", "79.7"],
  ["23/8/2019", "67", "75", "72.2"],
  ["24/8/2019", "65", "75", "70.7"],
  ["25/8/2019", "66", "76", "70.4"],
  ["26/8/2019", "61", "73", "67"],
  ["27/8/2019", "65", "76", "69.5"],
  ["28/8/2019", "69", "76", "71.4"],
  ["29/8/2019", "69", "83", "75.8"],
  ["30/8/2019", "70", "88", "79.8"],
  ["31/8/2019", "71", "81", "75.7"],
  ["1/9/2019", "66", "77", "71.6"],
  ["2/9/2019", "70", "78", "73.9"],
  ["3/9/2019", "69", "81", "74.8"],
  ["4/9/2019", "70", "89", "78.1"],
  ["5/9/2019", "66", "73", "69.7"],
  ["6/9/2019", "61", "69", "64.9"],
  ["7/9/2019", "58", "77", "67.9"],
  ["8/9/2019", "67", "79", "72"],
  ["9/9/2019", "67", "75", "70.7"],
  ["10/9/2019", "68", "77", "72.2"],
  ["11/9/2019", "71", "91", "79.3"],
  ["12/9/2019", "64", "83", "73.3"],
  ["13/9/2019", "60", "72", "65"],
  ["14/9/2019", "63", "75", "71.3"],
  ["15/9/2019", "71", "84", "76.2"],
  ["16/9/2019", "70", "76", "73.2"],
  ["17/9/2019", "63", "77", "69.8"],
  ["18/9/2019", "58", "68", "63.7"],
  ["19/9/2019", "54", "70", "62.1"],
  ["20/9/2019", "60", "79", "70.6"],
  ["21/9/2019", "63", "85", "73.5"],
  ["22/9/2019", "69", "85", "77.4"],
  ["23/9/2019", "72", "90", "80.8"],
  ["24/9/2019", "67", "76", "71.9"],
  ["25/9/2019", "62", "79", "70.7"],
  ["26/9/2019", "67", "82", "71.4"],
  ["27/9/2019", "64", "77", "68.7"],
  ["28/9/2019", "67", "80", "73.8"],
  ["29/9/2019", "66", "79", "73.7"],
  ["30/9/2019", "61", "69", "65.4"],
  ["1/10/2019", "64", "82", "73.1"],
  ["2/10/2019", "68", "93", "78.9"],
  ["3/10/2019", "54", "66", "58.1"],
  ["4/10/2019", "51", "65", "60"],
  ["5/10/2019", "46", "60", "53.8"],
  ["6/10/2019", "59", "70", "66.6"],
  ["7/10/2019", "60", "78", "69.2"],
  ["8/10/2019", "59", "65", "61.6"],
  ["9/10/2019", "53", "60", "56.1"],
  ["10/10/2019", "53", "72", "61"],
  ["11/10/2019", "55", "65", "60.1"],
  ["12/10/2019", "56", "68", "61.4"],
  ["13/10/2019", "57", "67", "61"],
  ["14/10/2019", "59", "74", "64.3"],
  ["15/10/2019", "54", "65", "59"],
  ["16/10/2019", "55", "67", "61.6"],
  ["17/10/2019", "53", "59", "55.6"],
  ["18/10/2019", "49", "59", "53.5"],
  ["19/10/2019", "47", "62", "54"],
  ["20/10/2019", "52", "59", "55.3"],
  ["21/10/2019", "52", "67", "58.1"],
  ["22/10/2019", "55", "63", "59"],
  ["23/10/2019", "56", "66", "61"],
  ["24/10/2019", "53", "67", "59.3"],
  ["25/10/2019", "54", "67", "59.8"],
  ["26/10/2019", "55", "63", "59.2"],
  ["27/10/2019", "56", "70", "61.8"],
  ["28/10/2019", "54", "62", "58.4"],
  ["29/10/2019", "53", "58", "55.9"],
  ["30/10/2019", "56", "60", "58.6"],
  ["31/10/2019", "59", "67", "63.3"],
  ["1/11/2019", "43", "65", "50.1"],
  ["2/11/2019", "40", "50", "45.6"],
  ["3/11/2019", "44", "52", "47.8"],
  ["4/11/2019", "43", "55", "50.3"],
  ["5/11/2019", "51", "61", "56.7"],
  ["6/11/2019", "48", "55", "51.4"],
  ["7/11/2019", "42", "58", "50.6"],
  ["8/11/2019", "32", "41", "36.9"],
  ["9/11/2019", "30", "41", "36.3"],
  ["10/11/2019", "40", "52", "46.8"],
  ["11/11/2019", "49", "61", "54.8"],
  ["12/11/2019", "27", "57", "42.6"],
  ["13/11/2019", "25", "34", "29.7"],
  ["14/11/2019", "29", "45", "38.3"],
  ["15/11/2019", "38", "51", "45.4"],
  ["16/11/2019", "33", "42", "38"],
  ["17/11/2019", "31", "44", "38.8"],
  ["18/11/2019", "38", "43", "40.6"],
  ["19/11/2019", "41", "48", "44.4"],
  ["20/11/2019", "41", "48", "43.7"],
  ["21/11/2019", "40", "53", "47.1"],
  ["22/11/2019", "39", "54", "48.3"],
  ["23/11/2019", "36", "45", "41.2"],
  ["24/11/2019", "40", "48", "43.9"],
  ["25/11/2019", "41", "53", "47.3"],
  ["26/11/2019", "44", "59", "51.9"],
  ["27/11/2019", "46", "58", "53.5"],
  ["28/11/2019", "39", "53", "46.5"],
  ["29/11/2019", "32", "42", "36.6"],
  ["30/11/2019", "32", "44", "37.4"],
  ["1/12/2019", "30", "40", "35.2"],
  ["2/12/2019", "32", "39", "35.7"],
  ["3/12/2019", "32", "38", "33.9"],
  ["4/12/2019", "34", "40", "38.1"],
  ["5/12/2019", "38", "43", "39.9"],
  ["6/12/2019", "36", "50", "42.5"],
  ["7/12/2019", "32", "38", "35.7"],
  ["8/12/2019", "28", "44", "36.7"],
  ["9/12/2019", "41", "56", "47.8"],
  ["10/12/2019", "40", "58", "54.2"],
  ["11/12/2019", "32", "40", "35.2"],
  ["12/12/2019", "28", "36", "32.2"],
  ["13/12/2019", "33", "47", "42.6"],
  ["14/12/2019", "46", "55", "50.4"],
  ["15/12/2019", "38", "48", "43.9"],
  ["16/12/2019", "34", "37", "35.7"],
  ["17/12/2019", "33", "36", "34.4"],
  ["18/12/2019", "24", "37", "31.8"],
  ["19/12/2019", "18", "26", "22.2"],
  ["20/12/2019", "24", "34", "28"],
  ["21/12/2019", "24", "35", "30.1"],
  ["22/12/2019", "31", "47", "39.7"],
  ["23/12/2019", "38", "57", "47.3"],
  ["24/12/2019", "36", "47", "42.8"],
  ["25/12/2019", "34", "42", "37.5"],
  ["26/12/2019", "36", "46", "39.1"],
  ["27/12/2019", "43", "54", "50.3"],
  ["28/12/2019", "44", "50", "46.9"],
  ["29/12/2019", "39", "44", "40.5"],
  ["30/12/2019", "39", "43", "40.8"],
  ["31/12/2019", "38", "45", "40.9"]
];

// Fusioncharts data store
var dataStore = new FusionCharts.DataStore().createDataTable(data, schema);

var areaRangeData = {
  data: dataStore,
  caption: {
    text: "NewYork City - Temparature variations (2019)"
  },
  subcaption: {
    text: "Daily min, max and average temperatures"
  },
  chart: {
    showLegend: 0,
    showtooltip: 1
  },
  yAxis: [
    {
      title: "Temperature in Celcius",
      plot: [
        {
          value: {
            high: "High",
            low: "Low"
          },
          type: "area-range"
        }
      ]
    }
  ]
};

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

External CSS

  1. https://ds.fusioncharts.com/2.0.43/css/ds.css

External JavaScript

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