<div class="container-fluid">
  <div class="row shadow mt-2 mb-2 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="stackedbar2d" onclick="updateChart(this)">
          Stacked Bar Chart
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="column2d" onclick="updateChart(this)">
          Column Chart
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="funnel" onclick="updateChart(this)">
          Funnel Chart
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="mscombidy2d" onclick="updateChart(this)">
          Combination Chart
        </button>
        <button type="button" class="list-group-item list-group-item-action" name="doughnut2d" onclick="updateChart(this)">
          Doughnut Chart
        </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-wrapper {
  padding: 10px;
}

#chart-container {
  height: 400px;
}

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 stackedbar2dData = {
  chart: {
    caption: "Split of visitors by Channels & Gender",
    placevaluesinside: "1",
    showvalues: "0",
    plottooltext: "<b>$dataValue</b>  $seriesName visitors",
    theme: "fusion",
    usePattern: "1",
    showPlotBorder: 1,
    legendBorderAlpha: 100
  },
  categories: [
    {
      category: [
        {
          label: "Organic"
        },
        {
          label: "Offline Stores"
        },
        {
          label: "Email Campaigns"
        },
        {
          label: "Social Events"
        },
        {
          label: "Paid Channels"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "Male",
      patternAngle: "40",
      patternDensity: "6",
      patternSize: "2",
      patternAlpha: "100",
      patternBgColor: "#E6E7FB",
      patternBGAlpha: "100",
      data: [
        {
          value: "17000"
        },
        {
          value: "19500"
        },
        {
          value: "12500"
        },
        {
          value: "14500"
        },
        {
          value: "17500"
        }
      ]
    },
    {
      seriesname: "Female",
      patternType: "circle",
      patternAngle: "0",
      patternDensity: "6",
      patternSize: "4",
      color: "#29C3BE",
      patternAlpha: "100",
      patternBgColor: "#C7F5F4",
      patternBGAlpha: "100",
      data: [
        {
          value: "25400"
        },
        {
          value: "29800"
        },
        {
          value: "21800"
        },
        {
          value: "19500"
        },
        {
          value: "21200"
        }
      ]
    }
  ]
};

const column2dData = {
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]",
    subcaption: "In MMbbl = One Million barrels",
    xaxisname: "Country",
    yaxisname: "Reserves (MMbbl)",
    numbersuffix: "K",
    theme: "fusion",
    bgColor: "#FDF5E6",
    paletteColors: "#393939, #FF8C00, #B32321",
    usePattern: "1",
    showPlotBorder: 1
  },
  data: [
    {
      label: "Venezuela",
      value: "290",
      patternAngle: 30
    },
    {
      label: "Saudi",
      value: "260",
      patternType: "square",
      patternAngle: 45,
      patternDensity: 5
    },
    {
      label: "Canada",
      value: "180",
      patternType: "circle",
      patternSize: "5px",
      patternAngle: 45
    },
    {
      label: "Iran",
      value: "140",
      patternAngle: 0
    },
    {
      label: "Russia",
      value: "115",
      patternType: "square"
    }
  ]
};

const mscombidy2dData = {
  chart: {
    caption: "Revenue, Profits & Number of employees",
    drawcrossline: "1",
    yaxisname: "Revenue / Profit (in $)",
    syaxisname: "Number of employees",
    showvalues: "0",
    showanchors: "0",
    numberprefix: "$",
    plothighlighteffect: "fadeout",
    theme: "fusion",
    usePattern: "1",
    showPlotBorder: "1"
  },
  categories: [
    {
      category: [
        {
          label: "Mar-2012"
        },
        {
          label: "Jun-2012"
        },
        {
          label: "Sept-2012"
        },
        {
          label: "Dec-2012"
        },
        {
          label: "Mar-2013"
        },
        {
          label: "Jun-2013"
        },
        {
          label: "Sept-2013"
        },
        {
          label: "Dec-2013"
        },
        {
          label: "Mar-2014"
        },
        {
          label: "Jun-2014"
        },
        {
          label: "Sept-2014"
        },
        {
          label: "Dec-2014"
        },
        {
          label: "Mar-2015"
        },
        {
          label: "Jun-2015"
        },
        {
          label: "Sept-2015"
        },
        {
          label: "Dec-2015"
        },
        {
          label: "Mar-2016"
        },
        {
          label: "Jun-2016"
        },
        {
          label: "Sept-2016"
        },
        {
          label: "Dec-2016"
        },
        {
          label: "Mar-2017"
        },
        {
          label: "Jun-2017"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "Revenue",
      plottooltext: "Revenue in $label : <b>$dataValue</b>",
      patternType: "line",
      patternAngle: 40,
      patternDensity: 6,
      patternSize: 2,
      color: "#5d62b5",
      patternAlpha: 100,
      patternBgColor: "#e6e7fb",
      patternBgAlpha: 100,
      data: [
        {
          value: "36000"
        },
        {
          value: "22000"
        },
        {
          value: "24000"
        },
        {
          value: "42000"
        },
        {
          value: "35000"
        },
        {
          value: "21000"
        },
        {
          value: "26000"
        },
        {
          value: "28000"
        },
        {
          value: "47000"
        },
        {
          value: "38000"
        },
        {
          value: "29000"
        },
        {
          value: "23000"
        },
        {
          value: "24000"
        },
        {
          value: "42000"
        },
        {
          value: "35000"
        },
        {
          value: "21000"
        },
        {
          value: "26000"
        },
        {
          value: "28000"
        },
        {
          value: "47000"
        },
        {
          value: "38000"
        },
        {
          value: "29000"
        },
        {
          value: "23000"
        }
      ]
    },
    {
      seriesname: "Profit",
      plottooltext: "Profit in $label : <b>$dataValue</b>",
      renderas: "area",
      showvalues: "0",
      patternType: "circle",
      patternAngle: 0,
      patternDensity: 6,
      patternSize: 4,
      color: "#29c3be",
      patternAlpha: 100,
      patternBgColor: "#d6f9f8",
      patternBgAlpha: 100,
      data: [
        {
          value: "4000"
        },
        {
          value: "5000"
        },
        {
          value: "3000"
        },
        {
          value: "4000"
        },
        {
          value: "1000"
        },
        {
          value: "7000"
        },
        {
          value: "1000"
        },
        {
          value: "4000"
        },
        {
          value: "1000"
        },
        {
          value: "6000"
        },
        {
          value: "2000"
        },
        {
          value: "7000"
        },
        {
          value: "6000"
        },
        {
          value: "8000"
        },
        {
          value: "10000"
        },
        {
          value: "7000"
        },
        {
          value: "8000"
        },
        {
          value: "4000"
        },
        {
          value: "9000"
        },
        {
          value: "6000"
        },
        {
          value: "6000"
        },
        {
          value: "7000"
        }
      ]
    },
    {
      seriesname: "Number of Employees",
      parentyaxis: "S",
      renderas: "line",
      showvalues: "0",
      plottooltext: "$value employees",
      data: [
        {
          value: "31"
        },
        {
          value: "25"
        },
        {
          value: "35"
        },
        {
          value: "29"
        },
        {
          value: "25"
        },
        {
          value: "23"
        },
        {
          value: "26"
        },
        {
          value: "25"
        },
        {
          value: "25"
        },
        {
          value: "35"
        },
        {
          value: "20"
        },
        {
          value: "30"
        },
        {
          value: "46"
        },
        {
          value: "34"
        },
        {
          value: "26"
        },
        {
          value: "33"
        },
        {
          value: "46"
        },
        {
          value: "25"
        },
        {
          value: "35"
        },
        {
          value: "28"
        },
        {
          value: "20"
        },
        {
          value: "43"
        }
      ]
    }
  ]
};

const funnelData = {
  chart: {
    caption: "Website visits",
    subcaption: "Purchase - Conversion analysis for last year",
    decimals: "1",
    showvalues: "1",
    plottooltext: "$label: <b>$dataValue</b>",
    plotfillalpha: "70",
    theme: "fusion",
    streamlineddata: "0",
    usePattern: "1",
    showPlotBorder: "1"
  },
  data: [
    {
      label: "Website Visits",
      value: "17362",
      patternType: "line",
      patternAngle: 305,
      patternDensity: 12,
      patternSize: 2,
      color: "#5d62b5",
      patternAlpha: 80
    },
    {
      label: "Downloads",
      value: "8039",
      patternType: "square",
      patternAngle: 0,
      patternDensity: 12,
      patternSize: 4,
      color: "#29c3be",
      patternAlpha: 80
    },
    {
      label: "Checked Pricing",
      value: "5509",
      patternType: "line",
      patternAngle: 55,
      patternDensity: 6,
      patternSize: 2,
      color: "#f2726f",
      patternAlpha: 80
    },
    {
      label: "Asked for Quotation",
      value: "3962",
      patternType: "square",
      patternAngle: 0,
      patternDensity: 6,
      patternSize: 4,
      color: "#ffc533",
      patternAlpha: 80
    },
    {
      label: "Purchased",
      value: "2397",
      patternType: "line",
      patternAngle: 0,
      patternDensity: 6,
      patternSize: 4,
      color: "#62b58f",
      patternAlpha: 30
    }
  ]
};

const doughnut2dData = {
  chart: {
    caption: "Android Distribution for our app",
    subcaption: "For all users in 2017",
    showpercentvalues: "1",
    defaultcenterlabel: "Android Distribution",
    aligncaptionwithcanvas: "0",
    captionpadding: "0",
    decimals: "1",
    plottooltext:
      "<b>$percentValue</b> of our Android users are on <b>$label</b>",
    centerlabel: "# Users: $value",
    theme: "fusion",
    usePattern: "1",
    showPlotBorder: "1"
  },
  data: [
    {
      label: "Ice Cream Sandwich",
      value: "1000",
      patternType: "line",
      patternAngle: 40,
      patternDensity: 6,
      patternSize: 2,
      color: "#5d62b5",
      patternAlpha: 70,
      patternBgColor: "#3c3f7a",
      patternBgAlpha: 100
    },
    {
      label: "Jelly Bean",
      value: "5300",
      patternType: "square",
      patternAngle: 0,
      patternDensity: 6,
      patternSize: 4,
      color: "#1b8582",
      patternAlpha: 50,
      patternBgColor: "#29c3be",
      patternBgAlpha: 100
    },
    {
      label: "Kitkat",
      value: "10500",
      patternType: "line",
      patternAngle: 90,
      patternDensity: 6,
      patternSize: 2,
      color: "#b55452",
      patternAlpha: 50,
      patternBgColor: "#f2726f",
      patternBgAlpha: 100
    },
    {
      label: "Lollipop",
      value: "18900",
      patternType: "circle",
      patternAngle: 0,
      patternDensity: 6,
      patternSize: 4,
      color: "#c79a28",
      patternAlpha: 50,
      patternBgColor: "#ffc533",
      patternBgAlpha: 100
    },
    {
      label: "Marshmallow",
      value: "17904",
      patternType: "line",
      patternAngle: 40,
      patternDensity: 6,
      patternSize: 4,
      color: "#509474",
      patternAlpha: 70,
      patternBgColor: "#62b58f",
      patternBgAlpha: 100
    }
  ]
};

FusionCharts.ready(function () {
  var myChart = new FusionCharts({
    type: "stackedbar2d",
    id: "demo-chart",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource: stackedbar2dData
  }).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");
  let chartData = eval(`${ev.name}Data`);
  FusionCharts.items["demo-chart"].chartType(ev.name);
  FusionCharts.items["demo-chart"].setChartData(chartData);
}

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