Sparkine: Area Chart

A recent addition to DataGridXL v3 are sparkline columns. These read-only columns can display a set of data in various chart-type formats:

• Column Charts
• Line Charts
• Area Charts.

Sparklines are very basic by design, as they are meant for quick-scanning. The sparklines do not have axis information, nor do they have interactive functions like tooltips. The sparkline graphic will stretch the entire width of the column.

The data for a sparkline-type column is always an array of numeric values. The amount is flexible, but you'll get prettiest results when the array length is the same for the entire column.

const data = [
  {
    "category": "Cars",
    "sales": [10, 40, 30, 44, 50]
  },
  {
    "category": "Boats",
    "sales": [20, 30, 50, 30, 20]
  },
  {
    "category": "Bikes",
    "sales": [5, 10, 20, 50, 50]
  }
]

If you need more detailed charts, you could add a sidebar in your app with a JavaScript chart component instance, such as amCharts. Or you could render a chart instance inside a DataGridXL cell popover, which could be a more detailed version of the sparkline chart that you render inside your data grid.