<div class="container-fluid">
  <div class="row shadow mt-5 mb-5 mr-3 ml-3">
    <div class="col-4 pt-4">
      <div id="action-group" class="list-group pt-2">
        <button type="button" class="list-group-item list-group-item-action active" name="normal" onclick="updateChart(this)">
          Normal
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="rotate" onclick="updateChart(this)">
          Rotate 15°
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="skew" onclick="updateChart(this)">
          Skew X-15°, Y-15°
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="scale" onclick="updateChart(this)">
          Scale X-0.5, Y-1
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="translate" onclick="updateChart(this)">
          Translate X-30, Y-15
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="matrix" onclick="updateChart(this)">
          Matrix
        </button>
      </div>
    </div>
    <div class="col-8">
      <div id="chart-wrapper">
        <div id="chart-container"></div>
      </div>
    </div>
  </div>
</div>
.shadow {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}

#chart-container {
  height: 450px;
}

button {
  outline: none !important;
}

.active {
  background: #5d62b5 !important;
  border-color: #5d62b5 !important;
}

.list-group-item:first-child {
  border-top-left-radius: 0.1rem !important;
  border-top-right-radius: 0.1rem !important;
}

.list-group-item:last-child {
  border-bottom-left-radius: 0.1rem !important;
  border-bottom-right-radius: 0.1rem !important;
}

.rotate {
  transform: rotateZ(30deg);
}

.skew {
  transform: skew(15deg, 15deg);
}

.scale {
  transform: scale(0.5, 1);
}

.translate {
  transform: translate(30px, 15px);
}

.matrix {
  transform: matrix(0.5, 1, -0.5, 0.5, 40, 40);
}
const chartData = {
  chart: {
    caption: "Top 5 Countries With Most Oil Reserves",
    subcaption: "In MMbbl = One Million barrels",
    xaxisname: "Country",
    yaxisname: "Reserves (MMbbl)",
    numbersuffix: "K",
    theme: "fusion"
  },
  data: [
    {
      label: "Venezuela",
      value: "290"
    },
    {
      label: "Saudi",
      value: "260"
    },
    {
      label: "Canada",
      value: "180"
    },
    {
      label: "Iran",
      value: "140"
    },
    {
      label: "Russia",
      value: "115"
    }
  ]
};

FusionCharts.ready(function () {
  var myChart = new FusionCharts({
    type: "column2d",
    id: "demo-chart",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource: chartData
  }).render();
});

var chartWrapperElem = document.getElementById("chart-wrapper");

function updateChart(ev) {
  let btns = document.getElementsByTagName("button");
  for (i = 0; i < btns.length; i++) {
    btns[i].classList.remove("active");
  }

  ev.classList.add("active");
  classNameArr = ["rotate", "skew", "scale", "translate", "matrix"];

  if (ev.name === "normal") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
  } else if (ev.name === "rotate") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
    chartWrapperElem.classList.add("rotate");
  } else if (ev.name === "skew") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
    chartWrapperElem.classList.add("skew");
  } else if (ev.name === "scale") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
    chartWrapperElem.classList.add("scale");
  } else if (ev.name === "translate") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
    chartWrapperElem.classList.add("translate");
  } else if (ev.name === "matrix") {
    for (var i = 0; i < classNameArr.length; i++) {
      chartWrapperElem.classList.remove(classNameArr[i]);
    }
    chartWrapperElem.classList.add("matrix");
  }
}

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