Multi Charts

MultiChart combines two to four charts inside a single block with a shared title, subtitle, legend, and source footer. Each panel is an independent chart instance — Line, Bar, or any other type — arranged in a CSS grid.

Usage

new RareCharts.MultiChart('#container', {
  title:    'A Selloff Takes Shape',
  subtitle: 'Selling intensified on the second day of trading',
  source:   'Bloomberg',
  columns:  2,         // 1 – 4 columns
  chartHeight: 200,    // height of each cell in px

  charts: [
    {
      type:  'Line',
      title: 'Brent Crude',
      data:  brentData,
      options: { yPrefix: '$', lineColor: '#00aaff' },
    },
    {
      type:  'Line',
      title: 'DXY Dollar Index',
      data:  dxyData,
    },
    {
      type:  'Bar',
      title: 'Monthly Volumes',
      data:  volumeData,
      options: { barColor: '#00aaff' },
    },
  ],
});

Each child chart is accessible via mc.charts[index] after construction, so individual panels can be updated independently:

mc.charts[0].setData(newBrentData);

Or update all panels in a single call:

mc.setData([brentData, dxyData, ftseData, volumeData]);

Responsive layout

MultiChart automatically switches to a single column when the container width reaches the breakpoint (default 480 px). No extra configuration needed — on desktop you get two columns, on mobile everything stacks vertically.

Use mobileOptions on any chart descriptor to override that panel's options when the narrow layout is active. The most common use case is restoring hidden Y-axis labels on panels that suppressed them in the side-by-side view:

{
  type: 'Bar',
  title: 'Women',
  options: {
    showYAxis: false,   // hidden on desktop — Men chart already shows the labels
    margin: { left: 0 },
  },
  mobileOptions: {
    showYAxis: true,    // restored on mobile — chart stands alone
    margin: { left: 100 },
  },
}

Side-by-side horizontal bar charts are a natural fit for group comparisons where labels are shared. Suppress the Y axis on panels after the first to keep things clean:

When you need a third panel, the span field on a chart descriptor stretches that cell across all grid columns — a clean way to place a summary chart above two detail panels:

MultiChart options

Common options shared by all chart types (title, subtitle, legend, legendPosition, source, theme) are documented on the Settings page.

Chart descriptor fields

Each object in the charts array defines one panel: