<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
    <div class="col-4">
      <div class="demo-card">
        <div class="theme-control">
          <h5 class="mb-1">Themes</h5>
          <button id="fusion-theme-switcher" class="btn btn-sm btn-selected" onClick="handler.switchTheme('fusion')">
            Fusion
          </button>
          <button id="gammel-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('gammel')">
            Gammel
          </button>
          <button id="candy-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('candy')">
            Candy
          </button>
          <button id="umber-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('umber')">
            Umber
          </button>
        </div>
        <div class="height-control mt-2">
          <h5 class="mb-1">Canvas Height</h5>
          <button id="1-3-height-switcher" class="btn btn-sm btn-selected" onClick="handler.changeHeight('1:3')">
            1:3
          </button>
          <button id="2-3-height-switcher" class="btn btn-sm" onClick="handler.changeHeight('2:3')">
            2:3
          </button>
          <button id="3-1-height-switcher" class="btn btn-sm" onClick="handler.changeHeight('3:1')">
            3:1
          </button>
          <button id="3-2-height-switcher" class="btn btn-sm" onClick="handler.changeHeight('3:2')">
            3:2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
#chart-container {
  width: 100%;
  height: 500px;
}

.demo-card {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #b3b3b3;
  width: 100%;
}

.btn-sm:hover {
  background: #212344;
  color: #ffffff;
}

.btn-selected {
  background: #212344;
  color: #ffffff;
}
function fetchCheckStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  } else {
    var error = new Error(response.statusText);
    error.response = response;
    throw error;
  }
}

function loadData(url) {
  var option = {
    method: "GET",
    headers: new Headers(),
    mode: "cors",
    cache: "default"
  };

  return fetch(url, option)
    .then(fetchCheckStatus)
    .then(function(resp) {
      var contentType = resp.headers.get("Content-Type");
      if (contentType && contentType.indexOf("application/json") !== -1) {
        return resp.json();
      } else {
        return resp.text();
      }
    })
    .then(function(data) {
      return data;
    })
    .catch(function(err) {
      console.log("Something went wrong! Please check data/schema files");
    });
}

var data, schema, dataStore;

Promise.all([
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/variable-canvas-height_data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/variable-canvas-height_schema.json"
  )
]).then(function(res) {
  data = res[0];
  schema = res[1];

  dataStore = new FusionCharts.DataStore(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    id: "variable-height-demo-chart",
    width: "100%",
    height: "100%",
    dataSource: {
      chart: {
        multiCanvas: true,
        canvasHeightProportion: "1:3"
      },
      caption: {
        text: "Sales Performance"
      },
      subcaption: {
        text: "Configuration of the canvas height proportion"
      },
      yAxis: [
        {
          plot: {
            value: "Sale Amount",
            type: "area"
          },
          title: "Sale Amount",
          format: {
            prefix: "$"
          }
        },
        {
          plot: {
            value: "Units Sold",
            type: "column"
          },
          title: "Units Sold"
        }
      ],
      data: dataStore.getDataTable()
    }
  }).render();
});

const handler = {
  switchTheme: function(val) {
    let fusionThemeElem = document.getElementById("fusion-theme-switcher");
    let gammelThemeElem = document.getElementById("gammel-theme-switcher");
    let candyThemeElem = document.getElementById("candy-theme-switcher");
    let umberThemeElem = document.getElementById("umber-theme-switcher");

    fusionThemeElem.classList.remove("btn-selected");
    gammelThemeElem.classList.remove("btn-selected");
    candyThemeElem.classList.remove("btn-selected");
    umberThemeElem.classList.remove("btn-selected");

    if (val === "fusion") {
      fusionThemeElem.classList.add("btn-selected");
    } else if (val === "gammel") {
      gammelThemeElem.classList.add("btn-selected");
    } else if (val === "candy") {
      candyThemeElem.classList.add("btn-selected");
    } else if (val === "umber") {
      umberThemeElem.classList.add("btn-selected");
    }

    FusionCharts.items["variable-height-demo-chart"].setChartAttribute(
      "theme",
      val
    );
  },

  changeHeight: function(val) {
    let ds = {
      chart: {
        multiCanvas: true,
        canvasHeightProportion: val
      },
      caption: {
        text: "Sales Performance"
      },
      subcaption: {
        text: "Configuration of the canvas height proportion"
      },
      yAxis: [
        {
          plot: {
            value: "Sale Amount",
            type: "area"
          },
          title: "Sale Amount",
          format: {
            prefix: "$"
          }
        },
        {
          plot: {
            value: "Units Sold",
            type: "column"
          },
          title: "Units Sold"
        }
      ],
      data: dataStore.getDataTable()
    };

    let ratio1_3Elem = document.getElementById("1-3-height-switcher");
    let ratio2_3Elem = document.getElementById("2-3-height-switcher");
    let ratio3_1Elem = document.getElementById("3-1-height-switcher");
    let ratio3_2Elem = document.getElementById("3-2-height-switcher");

    ratio1_3Elem.classList.remove("btn-selected");
    ratio2_3Elem.classList.remove("btn-selected");
    ratio3_1Elem.classList.remove("btn-selected");
    ratio3_2Elem.classList.remove("btn-selected");

    if (val === "1:3") {
      ratio1_3Elem.classList.add("btn-selected");
    } else if (val === "2:3") {
      ratio2_3Elem.classList.add("btn-selected");
    } else if (val === "3:1") {
      ratio3_1Elem.classList.add("btn-selected");
    } else if (val === "3:2") {
      ratio3_2Elem.classList.add("btn-selected");
    }

    FusionCharts.items["variable-height-demo-chart"].setJSONData(ds);
  }
};

External CSS

  1. https://ds.fusioncharts.com/2.0.42/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
  3. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js
  4. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js
  5. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.umber.js