v7.3.0

ChartColumn

A column that displays a Chart in each cell.

Records for the chart are provided by the field defined in the column configuration. Values will be read from that field on the grid record model for a given row. The value of the field should be an array of records of chart data, each containing the fields required by the chart's defined series and labels.

By default, the chart will update when its store fires a change event. To disable auto-sync, set the autoSync property of the chart config to false.

new Grid({
    columns : [
        {
             type: 'chart',

chart : { chartType : 'line', series : [{ field : 'price' },{ field : 'changePct' }], labels : { field : 'symbol' } } } ] });

Note that this column requires using thin bundles or thin npm packages in your application, and importing the chart bundle / package. It does not work with normal packages, module or umd bundles.

Useful configs

Config Description
chart Chart config (chartType, series, labels)

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • The Chart widget configuration. Since charts are imported from a separate module, the chart class will be lazy loaded when this column is used.

    Has a corresponding runtime chart property.

  • CSS class name to add to chart.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • The Chart widget configuration. Since charts are imported from a separate module, the chart class will be lazy loaded when this column is used.

    Has a corresponding chart config.

  • isChartColumn : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of ChartColumn class, or subclass thereof.
type: chart

Source path

Grid/column/ChartColumn.js

Contents