Responsive Charts, Gradient Fills and Image Markers

Responsive chart rules

A chart that reads well at 640 pixels is cluttered at 300. Responsive rules fix that by laying options over the chart while its own container sits inside a width or height band, so a chart in a narrow dashboard panel gets the narrow layout even on a wide screen. Use the ready-made automatic set to tidy the legend, titles and ticks as space runs out, then add rules of your own on top. When the space comes back the options you set return exactly, and a rule holds for a few pixels past its edge so a container on a boundary does not flicker.

Try it. Drag the bottom right corner of the chart to make it narrower and wider.

createChart({
  grid,
  container,
  type: 'bar',
  x: 'q',
  y: 'sales',
  series: 'region',
  axis: { x: { title: 'Quarter' }, y: { title: 'Sales (k)' } },
  responsive: [
    'auto',
    { maxWidth: 300, set: { legend: false } },
  ],
});

Options used: responsive, 'auto', maxWidth, set

({
  columns: [
    { field: 'q', title: 'Quarter' },
    { field: 'region', title: 'Region' },
    { field: 'sales', title: 'Sales (k)', type: 'number' },
  ],
  rows: [
    ['Q1', [120, 90, 70]], ['Q2', [150, 110, 85]], ['Q3', [135, 125, 95]], ['Q4', [180, 140, 120]],
  ].flatMap(([q, v]) => ['North', 'South', 'East'].map((region, i) => ({ id: q + region, q, region, sales: v[i] }))),
})

Chart gradient and pattern fills, image markers

Wherever a chart takes a colour for a filled mark, it now takes a gradient or a pattern. Bars, areas, pie and donut slices, treemap cells, bands and map land accept linear or radial gradients and hatch, crosshatch, dot and grid textures, for the whole series or row by row from a column. A patterns scheme tells series apart by texture as well as hue, which is the colour-blind-safe option and survives a greyscale print. Line, scatter, bubble and marker map points can also use an icon or a picture in place of the dot, and an unsafe or failed picture simply keeps the default marker.

createChart({
  grid,
  container: containers[0],
  type: 'bar',
  x: 'team',
  y: 'hours',
  scheme: [{ gradient: 'linear', stops: [[0, '#0072b2'], [1, '#56b4e9']] }],
  fill: 'look',
  title: 'Hours by team',
});
createChart({
  grid,
  container: containers[1],
  type: 'scatter',
  x: 'hours',
  y: 'cost',
  marker: { image: 'circleFilled', size: 18 },
  title: 'Cost against hours',
});

Options used: scheme, gradient, fill, marker

({
  columns: [
    { field: 'team', title: 'Team' },
    { field: 'hours', title: 'Hours', type: 'number' },
    { field: 'look', title: 'Texture' },
    { field: 'cost', title: 'Cost (k)', type: 'number' },
  ],
  rows: [
    { id: 'a', team: 'Platform', hours: 32, look: 'hatch', cost: 41 },
    { id: 'b', team: 'Data', hours: 18, look: null, cost: 29 },
    { id: 'c', team: 'Mobile', hours: 25, look: 'dots', cost: 33 },
    { id: 'd', team: 'Design', hours: 14, look: 'crosshatch', cost: 17 },
  ],
})