<div id="chart-container" class="chart"></div>
<div class="controller">
  <span id="option-label">Please select the format: </span>
  <select id="format" class="option-controller">
    <option value="png">png</option>
    <option value="jpg">jpg</option>
    <option value="pdf">pdf</option>
    <option value="csv">csv</option>
    <option value="xlsx">xlsx</option>
  </select>
  <button id="export" class="btn btn-secondary-grad ml-1">Export</button>
</div>
.chart {
  width: 100%;
  height: 400px;
}

#option-label {
  font-weight: 600;
  color: black;
  display: inline;
}

.controller {
  text-align: center;
}

.option-controller {
  width: 250px;
  margin-top: 5px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(62, 57, 107, 0.05);
  background-image: none;
  overflow: hidden;
  position: relative;
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid #dadae4;
  border-radius: 0.5rem;
  color: #434456;
  font-size: 15px;
  line-height: 1.5;
  padding: 1rem 1.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiDBILGzbCYdPeAAAAcElEQVQ4y+3TOQ6AIBBA0e9BwO1WXt0loAfRAgs0KDCVJvypXzOZgdJPqhhQQrtBzcIumJUeZPykEu5RAJ3B7ZXmcEsX2p5mltIU/kJjPEIdnx5om3I5KsATaYibdHrnmdTnAur4iKGRUMel71r6VgcdldK8SuppHgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0xOFQxMDoyNzo1NCswMTowMAXwHqgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMThUMTA6Mjc6NTQrMDE6MDB0raYUAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==)
    95%/12px no-repeat #fff;
  padding-right: 20px;
  text-transform: none;
}

.option-controller:focus {
  outline: none;
}
var jsonify = res => res.json();
var dataFetch = fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json').then(jsonify);
var schemaFetch = fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json').then(jsonify);

Promise.all([dataFetch, schemaFetch]).then(res => {
  var data = res[0];
  var schema = res[1];
  var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema);

  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    "caption": {
      "text": "Web visits & downloads",
      outputFormat: "%b %y"
    },
    "subcaption": {
      "text": "since 2015"
    },
    "yaxis": [{
      plot: [{
          value: "Downloads",
          type: "column"
        },
        {
          value: "Web Visits",
          type: "column"
        }
      ],
      "title": "",
      "style": {
        "label": {
          'fill-opacity': "0"
        },
        "tick-mark": {
          'stroke-opacity': 0
        }
      }
    }],
    "chart": {
    exportEnabled: 1,
      theme: "fusion",
      "style": {
        "canvas": {
          'stroke-opacity': "0"
        }
      }
    }
  };
  dataSource.data = dataStore.createDataTable(data, schema);

let chart =   new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataSource
  }).render();
  function export_chart() {
        var format = document.getElementById("format").value;
        chart.exportChart({
          "exportFormat": format
        });
      }
  document.getElementById("export").addEventListener("click", export_chart);
});

External CSS

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

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/release_3.16.0/fusioncharts.js