FusionCharts - Gallery Example - Multi-Series Column 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Aniruddha Galgali

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'gantt',
      renderAt: 'chart-container',
      width: 550,
      height: 350,
      dataFormat: 'json',
      dataSource: {
    chart: {
      theme: "fusion",
      dateformat: "mm/dd/yyyy",
      caption: "Timeline",
      subcaption: "Project Plan",
      chartbottomMargin: "90",
      showLabel: "0",
      milestoneFontBold: "1",
      tooltipPosition: "bottom",
      toolTipBorderColor: "000000",
      plottooltext: "$processName{br} $label starting date $start{br}$label ending date $end",
      animation: 1,
      forceRowHeight: 1
    },
    categories: [
      {
        category: [
          {
            start: "06/01/2022",
            end: "06/30/2022",
            label: "Jun 2022"
          },
          {
            start: "07/01/2022",
            end: "07/31/2022",
            label: "Jul 2022"
          },
          {
            start: "08/01/2022",
            end: "08/31/2022",
            label: "Aug 2022"
          },
          {
            start: "09/01/2022",
            end: "09/30/2022",
            label: "Sep 2022"
          },
          {
            start: "10/01/2022",
            end: "10/31/2022",
            label: "Oct 2022"
          },
          {
            start: "11/01/2022",
            end: "11/30/2022",
            label: "Nov 2022"
          }
        ]
      }
    ],
    processes: {
      fontsize: "12",
      isbold: "1",
      align: "left",
      process: [
  {
    id: "PROCESS_1",
    categoryId: "1",
    label: "Feature L",
    hoverBandColor: "e44a00"
  },
  {
    id: "PROCESS_2",
    categoryId: "2",
    label: "Feature M",
    hoverBandColor: "#8aaceb"
  },
  {
    id: "PROCESS_3",
    categoryId: "3",
    label: "Feature N"
  },
  {
    id: "PROCESS_4",
    categoryId: "4",
    label: "Feature O"
  },
  {
    id: "PROCESS_5",
    categoryId: "5",
    label: "Feature P"
  }
      ]
    },
    tasks: {
      color: "#fffff",
...