FancyGrid Grid with Chart

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="grid" style="margin-left: 10px;margin-top: 10px;"></div>
<div id="column" style="margin-left: 10px;height: 352px; width: 690px;"></div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    renderTo: 'grid',
    width: 690,
    height: 'fit',
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 80,
      editable: true,
      sortable: true,
      resizable: true
    },
    clicksToEdit: 1,
    columns: [{
      title: 'Year',
      index: 'year',
      editable: false,
      width: 55
    }, {
      title: 'Toyota',
      index: 'toyota',
      format: 'number'
    }, {
      title: 'GM',
      index: 'gm',
      format: 'number'
    }, {
      title: 'VW',
      index: 'vw',
      format: 'number'
    }, {
      title: 'Ford',
      index: 'ford',
      format: 'number'
    }, {
      title: 'Hyundai',
      index: 'hyundai',
      format: 'number'
    }, {
      width: 50,
      type: 'sparklinepie',
      sparkConfig: {
        sliceColors: ["#9DB160", "#B26668", "#4091BA", "#8E658E", "#3B8D8B", "#B6CA79", "#CB7F81", "#4091BA", "#8E658E", "#3B8D8B"]
      },
      values: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
    }, {
      title: 'Values',
      width: 60,
      type: 'sparklinebar',
      values: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
      sparkConfig: {
        barColor: '#60B3E2'
      }
    }, {
      title: 'Changes',
      index: 'changes',
      type: 'sparklinebar',
      width: 62,
      sparkConfig: {
        barColor: '#60B3E2',
        negBarColor: '#F57A75'
      }
    }, {
      title: '%',
      index: 'percent',
      width: 45,
      type: 'number',
      render(o) {

        if (o.value < 0) {
          o.style = {
            color: '#E46B67'
          };
        } else {
          o.style = {
            color: '#65AE6E'
          };
        }

        o.value = o.value + '%';

        return o;
      }
    }]
  });
});

var data = [{
  year: 2006,
  toyota: 6800228,
  gm: 5779719,
  vw: 5429896,
  ford: 3956708,
  hyundai: 2003608,
  changes: [0, 0, 0, 0, 0],
  percent: 0
}, {
  year: 2007,
  toyota:...