Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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="scrollbar2d"
          onclick="updateChart(this)"
        >
          Grouped bar with scrolling
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="scrollstackedbar2d"
          onclick="updateChart(this)"
        >
          Stacked bars with scrolling
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="scrollmsstackedcolumn2d"
          onclick="updateChart(this)"
        >
          Grouped stacked columns with scrolling
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="scrollmsstackedcolumn2dlinedy"
          onclick="updateChart(this)"
        >
          Dual axis - Grouped stacked columns & line with scrolling
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="stackedcolumn2dlinedy"
          onclick="updateChart(this)"
        >
          Dual axis - Stacked columns & line
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="stackedarea2dlinedy"
          onclick="updateChart(this)"
        >
          Dual axis - Stacked area & line
        </button>
        <button
          type="button"
          class="list-group-item list-group-item-action"
          name="mscombidy3d"
          onclick="updateChart(this)"
        >
          Dual axis - Column, line & area, in 3D
        </button>
      </div>
    </div>
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
  </div>
</div>

              
            
!

CSS

              
                .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;
}

              
            
!

JS

              
                const scrollbar2dData = {
  chart: {
    caption: "Top 25 NPM Packages for Node.js Developers",
    subcaption: "March 2019 ",
    plottooltext: "$dataValue Downloads",
    yaxisname: "Number of Downloads",
    xaxisname: "Packages",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "Commander.js"
        },
        {
          label: "Async.js"
        },
        {
          label: "Request"
        },
        {
          label: "Express"
        },
        {
          label: "WebPack"
        },
        {
          label: "Underscore"
        },
        {
          label: "React"
        },
        {
          label: "JSDom"
        },
        {
          label: "Cheerio"
        },
        {
          label: "Mocha"
        },
        {
          label: "Marked"
        },
        {
          label: "LESS"
        },
        {
          label: "Morgan"
        },
        {
          label: "Karma"
        },
        {
          label: "MongoDB Driver"
        },
        {
          label: "Nodemailer"
        },
        {
          label: "Passport"
        },
        {
          label: "Browserify"
        },
        {
          label: "Grunt"
        },
        {
          label: "JSHint"
        },
        {
          label: "Angular"
        },
        {
          label: "Bower"
        },
        {
          label: "Pug"
        },
        {
          label: "PM2"
        },
        {
          label: "Hapi"
        }
      ]
    }
  ],
  dataset: [
    {
      data: [
        {
          value: "97294205"
        },
        {
          value: "95482197"
        },
        {
          value: "60224172"
        },
        {
          value: "33018247"
        },
        {
          value: "31615028"
        },
        {
          value: "28984878"
        },
        {
          value: "25391784"
        },
        {
          value: "23581733"
        },
        {
          value: "12321215"
        },
        {
          value: "10838161"
        },
        {
          value: "7808888"
        },
        {
          value: "7127519"
        },
        {
          value: "6659395"
        },
        {
          value: "5731933"
        },
        {
          value: "4843888"
        },
        {
          value: "3264090"
        },
        {
          value: "2755188"
        },
        {
          value: "2661761"
        },
        {
          value: "2371272"
        },
        {
          value: "2201511"
        },
        {
          value: "1821149"
        },
        {
          value: "1683996"
        },
        {
          value: "1602832"
        },
        {
          value: "1267422"
        },
        {
          value: "1042206"
        }
      ]
    }
  ]
};

const scrollstackedbar2dData = {
  chart: {
    caption: "Video Games Sales - 2018",
    subcaption: "Across different markets (In Million USD)",
    numbersuffix: "M",
    plottooltext: "<b>$seriesName</b><hr>$label: <b>$dataValue</b>",
    numvisibleplot: "5",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "Wii Sports"
        },
        {
          label: "Super Mario Bros"
        },
        {
          label: "Mario Kart Wii"
        },
        {
          label: "Wii Sports Resort"
        },
        {
          label: "Pokemon Red/Blue"
        },
        {
          label: "Tetris"
        },
        {
          label: "New Super Mario Bros"
        },
        {
          label: "Wii Play"
        },
        {
          label: "New Super Mario Bros. Wii"
        },
        {
          label: "Duck Hunt"
        },
        {
          label: "Nintendogs"
        },
        {
          label: "Mario Kart DS"
        },
        {
          label: "Pokemon Gold/Silver"
        },
        {
          label: "Wii Fit"
        },
        {
          label: "Wii Fit Plus"
        },
        {
          label: "Kinect Adventures"
        },
        {
          label: "Grand Theft Auto V"
        },
        {
          label: "GTA: San Andreas"
        },
        {
          label: "Super Mario World"
        },
        {
          label: "Brain Age"
        },
        {
          label: "Pokemon Diamond/Pearl"
        },
        {
          label: "Super Mario Land"
        },
        {
          label: "Super Mario Bros. 3"
        },
        {
          label: "Grand Theft Auto V"
        },
        {
          label: "GTA: Vice City"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "North America",
      data: [
        {
          value: "41.49"
        },
        {
          value: "29.08"
        },
        {
          value: "15.85"
        },
        {
          value: "15.75"
        },
        {
          value: "11.27"
        },
        {
          value: "23.2"
        },
        {
          value: "11.38"
        },
        {
          value: "14.03"
        },
        {
          value: "14.59"
        },
        {
          value: "26.93"
        },
        {
          value: "9.07"
        },
        {
          value: "9.81"
        },
        {
          value: "9"
        },
        {
          value: "8.94"
        },
        {
          value: "9.09"
        },
        {
          value: "14.97"
        },
        {
          value: "7.01"
        },
        {
          value: "9.43"
        },
        {
          value: "12.78"
        },
        {
          value: "4.75"
        },
        {
          value: "6.42"
        },
        {
          value: "10.83"
        },
        {
          value: "9.54"
        },
        {
          value: "9.63"
        },
        {
          value: "8.41"
        }
      ]
    },
    {
      seriesname: "Europe ",
      data: [
        {
          value: "29.02"
        },
        {
          value: "3.58"
        },
        {
          value: "12.88"
        },
        {
          value: "11.01"
        },
        {
          value: "8.89"
        },
        {
          value: "2.26"
        },
        {
          value: "9.23"
        },
        {
          value: "9.2"
        },
        {
          value: "7.06"
        },
        {
          value: "0.63"
        },
        {
          value: "11"
        },
        {
          value: "7.57"
        },
        {
          value: "6.18"
        },
        {
          value: "8.03"
        },
        {
          value: "8.59"
        },
        {
          value: "4.94"
        },
        {
          value: "9.27"
        },
        {
          value: "0.4"
        },
        {
          value: "3.75"
        },
        {
          value: "9.26"
        },
        {
          value: "4.52"
        },
        {
          value: "2.71"
        },
        {
          value: "3.44"
        },
        {
          value: "5.31"
        },
        {
          value: "5.49"
        }
      ]
    },
    {
      seriesname: "Japan",
      data: [
        {
          value: "3.77"
        },
        {
          value: "6.81"
        },
        {
          value: "3.79"
        },
        {
          value: "3.28"
        },
        {
          value: "10.22"
        },
        {
          value: "4.22"
        },
        {
          value: "6.5"
        },
        {
          value: "2.93"
        },
        {
          value: "4.7"
        },
        {
          value: "0.28"
        },
        {
          value: "1.93"
        },
        {
          value: "4.13"
        },
        {
          value: "7.2"
        },
        {
          value: "3.6"
        },
        {
          value: "2.53"
        },
        {
          value: "0.24"
        },
        {
          value: "0.97"
        },
        {
          value: "0.41"
        },
        {
          value: "3.54"
        },
        {
          value: "4.16"
        },
        {
          value: "6.04"
        },
        {
          value: "4.18"
        },
        {
          value: "3.84"
        },
        {
          value: "0.06"
        },
        {
          value: "0.47"
        }
      ]
    },
    {
      seriesname: " Rest of the world",
      data: [
        {
          value: "8.46"
        },
        {
          value: "0.77"
        },
        {
          value: "3.31"
        },
        {
          value: "2.96"
        },
        {
          value: "1"
        },
        {
          value: "0.58"
        },
        {
          value: "2.9"
        },
        {
          value: "2.85"
        },
        {
          value: "2.26"
        },
        {
          value: "0.47"
        },
        {
          value: "2.75"
        },
        {
          value: "1.92"
        },
        {
          value: "0.71"
        },
        {
          value: "2.15"
        },
        {
          value: "1.79"
        },
        {
          value: "1.67"
        },
        {
          value: "4.14"
        },
        {
          value: "10.57"
        },
        {
          value: "0.55"
        },
        {
          value: "2.05"
        },
        {
          value: "1.37"
        },
        {
          value: "0.42"
        },
        {
          value: "0.46"
        },
        {
          value: "1.38"
        },
        {
          value: "1.78"
        }
      ]
    }
  ]
};

const scrollmsstackedcolumn2dData = {
  chart: {
    caption: "Avocado sales among different states",
    subcaption: "2016-2018",
    plottooltext: "<b>$seriesName</b><hr>$label: <b>$dataValue</b>",
    xaxisname: "Quarter",
    yaxisname: "Sales (In USD)",
    theme: "fusion",
    animation: 0,
    numvisibleplot: 5
  },
  categories: [
    {
      category: [
        {
          label: "2015-Q1"
        },
        {
          label: "2015-Q2"
        },
        {
          label: "2015-Q3"
        },
        {
          label: "2015-Q4"
        },
        {
          label: "2016-Q1"
        },
        {
          label: "2016-Q2"
        },
        {
          label: "2016-Q3"
        },
        {
          label: "2016-Q4"
        },
        {
          label: "2017-Q1"
        },
        {
          label: "2017-Q2"
        },
        {
          label: "2017-Q3"
        },
        {
          label: "2017-Q4"
        }
      ]
    }
  ],
  dataset: [
    {
      dataset: [
        {
          seriesname: "New York",
          data: [
            {
              value: "510344.4"
            },
            {
              value: "825541.86"
            },
            {
              value: "1078603.31"
            },
            {
              value: "895751.26"
            },
            {
              value: "1213115.71"
            },
            {
              value: "1207901.26"
            },
            {
              value: "1163397.45"
            },
            {
              value: "841621.26"
            },
            {
              value: "1245085.8"
            },
            {
              value: "1103347.9"
            },
            {
              value: "1022076.68"
            },
            {
              value: "1025565.8"
            }
          ]
        },
        {
          seriesname: "Georgia",
          data: [
            {
              value: "5318642.2"
            },
            {
              value: "5701956"
            },
            {
              value: "5095298.61"
            },
            {
              value: "4118810.44"
            },
            {
              value: "5240363.94"
            },
            {
              value: "5212220.71"
            },
            {
              value: "4522632.08"
            },
            {
              value: "3374924.99"
            },
            {
              value: "4764169.41"
            },
            {
              value: "4424022.98"
            },
            {
              value: "3989718.21"
            },
            {
              value: "3970043.21"
            }
          ]
        }
      ]
    },
    {
      dataset: [
        {
          seriesname: "Maryland",
          data: [
            {
              value: "7524659.79"
            },
            {
              value: "8196424.21"
            },
            {
              value: "8325170.33"
            },
            {
              value: "7111010.55"
            },
            {
              value: "8694218.26"
            },
            {
              value: "8895865.95"
            },
            {
              value: "7244663.98"
            },
            {
              value: "5703274.8"
            },
            {
              value: "8419998.48"
            },
            {
              value: "7388812.3"
            },
            {
              value: "6517872.07"
            },
            {
              value: "7064818.95"
            }
          ]
        },
        {
          seriesname: "Idaho",
          data: [
            {
              value: "887124.05"
            },
            {
              value: "993801.32"
            },
            {
              value: "803841.86"
            },
            {
              value: "581555.6"
            },
            {
              value: "696292.47"
            },
            {
              value: "577209.67"
            },
            {
              value: "563216.54"
            },
            {
              value: "520417.15"
            },
            {
              value: "688505.86"
            },
            {
              value: "718619.31"
            },
            {
              value: "630249.87"
            },
            {
              value: "628688"
            }
          ]
        },
        {
          seriesname: "Massachusetts",
          data: [
            {
              value: "4441861.75"
            },
            {
              value: "5404269.51"
            },
            {
              value: "6223966.11"
            },
            {
              value: "5626179.46"
            },
            {
              value: "6722592.97"
            },
            {
              value: "6931022.03"
            },
            {
              value: "5220110.38"
            },
            {
              value: "4765293.29"
            },
            {
              value: "6584454.42"
            },
            {
              value: "5961664.26"
            },
            {
              value: "5567418.89"
            },
            {
              value: "5466678.99"
            }
          ]
        }
      ]
    }
  ]
};

const scrollmsstackedcolumn2dlinedyData = {
  chart: {
    caption: "Market Share of Korean Automobile Manufacturers in US",
    subcaption: "2005 - 2019",
    pyaxisname: "Units Sold",
    syaxisname: "% of total market share",
    snumbersuffix: "%",
    syaxismaxvalue: "25",
    showvalues: "0",
    drawcrossline: "1",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "2005"
        },
        {
          label: "2006"
        },
        {
          label: "2007"
        },
        {
          label: "2008"
        },
        {
          label: "2009"
        },
        {
          label: "2010"
        },
        {
          label: "2011"
        },
        {
          label: "2012"
        },
        {
          label: "2013"
        },
        {
          label: "2014"
        },
        {
          label: "2015"
        },
        {
          label: "2016"
        },
        {
          label: "2017"
        },
        {
          label: "2018"
        },
        {
          label: "2019"
        }
      ]
    }
  ],
  dataset: [
    {
      dataset: [
        {
          seriesname: "Honda City",
          data: [
            {
              value: "997281"
            },
            {
              value: "1063599"
            },
            {
              value: "1063964"
            },
            {
              value: "1152123"
            },
            {
              value: "1289128"
            },
            {
              value: "1394972"
            },
            {
              value: "1331194"
            },
            {
              value: "1047958"
            },
            {
              value: "974751"
            },
            {
              value: "983243"
            },
            {
              value: "1294208"
            },
            {
              value: "1435345"
            },
            {
              value: "1217785"
            },
            {
              value: "1163621"
            },
            {
              value: "1161561"
            }
          ]
        },
        {
          seriesname: "Honda Civic",
          data: [
            {
              value: "196354"
            },
            {
              value: "259493"
            },
            {
              value: "234755"
            },
            {
              value: "205717"
            },
            {
              value: "205081"
            },
            {
              value: "224978"
            },
            {
              value: "1277225"
            },
            {
              value: "1132872"
            },
            {
              value: "852656"
            },
            {
              value: "1234768"
            },
            {
              value: "205081"
            },
            {
              value: "1027759"
            },
            {
              value: "1141363"
            },
            {
              value: "1277225"
            },
            {
              value: "1285716"
            }
          ]
        }
      ]
    },
    {
      dataset: [
        {
          seriesname: "Hyundai Verna",
          data: [
            {
              value: "373709"
            },
            {
              value: "391276"
            },
            {
              value: "380002"
            },
            {
              value: "411456"
            },
            {
              value: "476001"
            },
            {
              value: "500537"
            },
            {
              value: "413815"
            },
            {
              value: "496356"
            },
            {
              value: "514865"
            },
            {
              value: "697118"
            },
            {
              value: "567824"
            },
            {
              value: "525457"
            },
            {
              value: "576222"
            },
            {
              value: "484427"
            },
            {
              value: "491488"
            }
          ]
        },
        {
          seriesname: "Hyundai Sonata",
          data: [
            {
              value: "47548"
            },
            {
              value: "73130"
            },
            {
              value: "107659"
            },
            {
              value: "179783"
            },
            {
              value: "202390"
            },
            {
              value: "156107"
            },
            {
              value: "88315"
            },
            {
              value: "103964"
            },
            {
              value: "191982"
            },
            {
              value: "120271"
            },
            {
              value: "125909"
            },
            {
              value: "138739"
            },
            {
              value: "179152"
            },
            {
              value: "131125"
            },
            {
              value: "181549"
            }
          ]
        }
      ]
    }
  ],
  lineset: [
    {
      seriesname: "Market Share %",
      plottooltext:
        "Total market share of Korean cars in $label is <b>$dataValue</b> in US",
      showvalues: "0",
      data: [
        {
          value: "17.74"
        },
        {
          value: "19.23"
        },
        {
          value: "15.43"
        },
        {
          value: "12.34"
        },
        {
          value: "15.34"
        },
        {
          value: "21.17"
        },
        {
          value: "13.14"
        },
        {
          value: "18.13"
        },
        {
          value: "13.13"
        },
        {
          value: "15.34"
        },
        {
          value: "14.74"
        },
        {
          value: "18.17"
        },
        {
          value: "19.22"
        },
        {
          value: "17.74"
        },
        {
          value: "20.17"
        }
      ]
    }
  ]
};

const stackedcolumn2dlinedyData = {
  chart: {
    caption: "Global Robotic Process Automation Market",
    subcaption: "2016 - 2021",
    yaxisname: "Market Size (in $ Millions)",
    syaxisname: "YoY growth in %",
    formatnumberscale: "0",
    numberprefix: "$",
    numbersuffix: "M",
    snumbersuffix: "%",
    showvalues: "0",
    plottooltext: "Market size for $seriesName in $label is <b>$dataValue</b>",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "2016"
        },
        {
          label: "2017"
        },
        {
          label: "2018"
        },
        {
          label: "2019"
        },
        {
          label: "2020"
        },
        {
          label: "2021"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "RPA Software",
      data: [
        {
          value: "73"
        },
        {
          value: "113"
        },
        {
          value: "153"
        },
        {
          value: "192"
        },
        {
          value: "232"
        },
        {
          value: "272"
        }
      ]
    },
    {
      seriesname: "RPA Services",
      data: [
        {
          value: "198"
        },
        {
          value: "330"
        },
        {
          value: "476"
        },
        {
          value: "630"
        },
        {
          value: "790"
        },
        {
          value: "952"
        }
      ]
    },
    {
      seriesname: "YoY Growth",
      parentyaxis: "S",
      plottooltext: "$dataValue growth expected in $label",
      renderas: "line",
      data: [
        {
          value: "73"
        },
        {
          value: "63"
        },
        {
          value: "42"
        },
        {
          value: "31"
        },
        {
          value: "24"
        },
        {
          value: "20"
        }
      ]
    }
  ]
};

const stackedarea2dlinedyData = {
  chart: {
    caption: "Energy Data for consumption vs. Price ",
    subcaption: "2010-2014",
    xaxisname: "Year",
    pyaxisname: "Total consumption-in billion BTU",
    syaxisname: "Price-in USD per million BTU",
    snumbersuffix: "M",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "2010"
        },
        {
          label: "2011"
        },
        {
          label: "2012"
        },
        {
          label: "2013"
        },
        {
          label: "2014"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "Coal",
      data: [
        {
          value: "41656762"
        },
        {
          value: "39327714"
        },
        {
          value: "34761848"
        },
        {
          value: "36077545"
        },
        {
          value: "35993151"
        }
      ]
    },
    {
      seriesname: "Electricity",
      data: [
        {
          value: "25623035"
        },
        {
          value: "25588952"
        },
        {
          value: "25212289"
        },
        {
          value: "25418495"
        },
        {
          value: "25690310"
        }
      ]
    },
    {
      seriesname: "Natural Gas",
      data: [
        {
          value: "49267013"
        },
        {
          value: "50029967"
        },
        {
          value: "52276699"
        },
        {
          value: "53716269"
        },
        {
          value: "55026395"
        }
      ]
    },
    {
      seriesname: "LPG",
      data: [
        {
          value: "5641972"
        },
        {
          value: "5677909"
        },
        {
          value: "5823618"
        },
        {
          value: "6333475"
        },
        {
          value: "6180102"
        }
      ]
    },
    {
      seriesname: "Total Price",
      renderas: "line",
      showanchors: "1",
      parentyaxis: "S",
      showvalues: "0",
      data: [
        {
          value: "3386.97"
        },
        {
          value: "3571.81‬"
        },
        {
          value: "5370.72‬"
        },
        {
          value: "5658.28‬"
        },
        {
          value: "5974.85‬‬"
        }
      ]
    }
  ]
};

const mscombidy3dData = {
  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"
  },
  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>",
      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",
      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"
        }
      ]
    }
  ]
};

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

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

  let chartData = eval(`${ev.name}Data`);
  FusionCharts.items["demo-chart"].chartType(ev.name);
  ev.classList.add("active");
  FusionCharts.items["demo-chart"].setJSONData(chartData);
}

              
            
!
999px

Console