Editable Charts: Drag a Bar to Edit the Row

Drag to edit chart

Drag a chart mark to change the data behind it. The new value is written through the grid’s own edit path, so validation, read-only columns and rows, vetoes, undo and change tracking apply exactly as they do to a cell edit. While you drag, the chart shows the live value in the column’s own format. If the grid refuses an edit, the mark springs back and the grid’s own message appears under the plot. It works on line and area points, bar ends, both ends of a floating bar, scatter points and pie slices, and every handle is a keyboard slider for those who do not drag.

Try it. Drag the top of a bar. Release above 100 to see the grid refuse the edit and the bar spring back.

createChart({
  grid,
  container,
  type: 'bar',
  x: 'region',
  y: 'target',
  editable: { step: 5, min: 0 },
  title: 'Sales target by region (k)',
});

Options used: editable, step, min, max

({
  columns: [
    { field: 'region', title: 'Region' },
    { field: 'target', title: 'Target (k)', type: 'number', edit: { enabled: true }, validation: { max: 100 } },
  ],
  rows: [
    { id: 'n', region: 'North', target: 40 },
    { id: 's', region: 'South', target: 65 },
    { id: 'e', region: 'East', target: 30 },
    { id: 'w', region: 'West', target: 55 },
  ],
})