FancyGrid Grid with Multiple charts

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>
<script src="https://fancygrid.com/resources/js/jquery.sparkline.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://fancygrid.com/resources/js/highchart-gray-theme.js"></script>

<div id="spline" style="height: 352px; width: 650px;"></div>
<div id="bar" style="height: 352px; width: 650px;position:absolute;left: 700px; top: 8px;"></div>
<div id="column" style="height: 352px; width: 650px;position:absolute;left: 700px; top: 380px;"></div>
<div id="grid" style="position:absolute;left: 8px; top: 380px;"></div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  $('#spline').highcharts({
    tooltip: {
      followPointer: true
    },
    chart: {
      type: 'spline',
      marginTop: 45,
      marginRight: 20
    },
    title: {
      text: 'Car production by largest manufacturers'
    },
    xAxis: {
      categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
    },
    yAxis: {
      title: false
    },
    plotOptions: {
      bar: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Toyota'
    }, {
      name: 'GM'
    }, {
      name: 'Volkswagen'
    }, {
      name: 'Ford'
    }, {
      name: 'Hyundai'
    }]
  });

  $('#bar').highcharts({
    exporting: {
      enabled: false
    },
    tooltip: {
      followPointer: true,
      formatter: function() {
        return this.series.name + ' in ' + this.key + ':' + this.percentage.toPrecision(4) + '%';
      }
    },
    chart: {
      type: 'bar',
      marginTop: 45,
      marginRight: 20
    },
    title: {
      text: 'Car production by largest manufacturers'
    },
    xAxis: {
      categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
    },
    yAxis: {
      title: false
    },
    plotOptions: {
      bar: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Toyota'
    }, {
      name: 'GM'
    }, {
      name: 'Volkswagen'
    }, {
      name: 'Ford'
    }, {
      name: 'Hyundai'
    }]
  });

  $('#column').highcharts({
    exporting: {
      enabled: false
    },
    tooltip: {
      followPointer: true,
      formatter: function() {
        return this.series.name + ' in ' + this.key + ':' + this.percentage.toPrecision(4) + '%';
      }
    },
    chart: {
      type: 'column',
      marginTop: 45,
      marginRight: 20
    },
    title: {
      text: 'Car production by largest manufacturers'
    },
    xAxis: {
      categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012',...