Charts and range selection

<BarChart
  ariaLabel="Standalone bar chart"
  height={120}
  data={chartData}
/>

<LineChart
  ariaLabel="Standalone line chart"
  height={120}
  data={chartData}
/>

<BarChart
  ariaLabel="Monthly orders"
  data={monthlyData}
  height={150}
  showGrid
  showLabels
  showValues
  legend="Orders"
  tooltipIndicator="dot"
  formatValue={(value) => `${value}`}
/>

<LineChart
  ariaLabel="Weekly subscriptions"
  data={monthlyData}
  height={150}
  showGrid
  showLabels
  interpolation="step"
  legend="Subscriptions"
  tooltipIndicator="line"
/>

<AreaChart
  ariaLabel="Monthly revenue"
  data={monthlyData}
  height={150}
  showGrid
  showLabels
  showPoints={false}
  areaFill="gradient"
  legend="Revenue"
  tooltipIndicator="dashed"
  renderTooltip={(datum) => (
    <>
      <strong>{datum.tooltip.title}</strong>
      <span>Revenue · ${datum.value.toLocaleString()}</span>
    </>
  )}
/>

<AreaChart
  ariaLabel="Monthly activity"
  data={monthlyData}
  height={120}
  showLabels
  tooltip={false}
  legend="Activity"
/>