Chart

The Chart widget defines axes and bounds for two-dimensional charts such as line, scatter, bar, and column charts.

<Svg style="width: 300px; height: 200px; border: 1px solid #ddd">
  <Chart
    margin="10 20 30 50"
    axes={{
      x: { type: NumericAxis },
      y: { type: NumericAxis, vertical: true },
    }}
  >
    <Rectangle fill="#eee" />
    <Gridlines />
  </Chart>
</Svg>

Axis Configuration

The most important part is axis configuration. A chart typically needs two axes:

• Horizontal axis (x) — default orientation
• Vertical axis (y) — set vertical: true

Numeric, category, and time axis types are supported. One axis must be vertical for proper chart orientation.

Margin and Offset

The margin property on the Chart element reserves space for axis labels and ticks. Use the format "top right bottom left" (e.g., margin="10 20 30 50").

The offset property works similarly to margin but with different sign conventions — it always works in the top-to-bottom and left-to-right direction. For right and bottom offsets, use negative numbers.

Example: offset="10 -20 -30 50" is equivalent to margin="10 20 30 50".

Secondary Axes

Charts can have secondary axes displayed at the top (x2) or right (y2) side. Set secondary: true on the axis configuration.

<Svg style="width: 400px; height: 300px; border: 1px solid #ddd">
  <Chart
    margin="60 60 60 60"
    axes={{
      x: { type: NumericAxis, min: 100, max: 500 },
      y: { type: NumericAxis, vertical: true, max: 5000 },
      x2: { type: NumericAxis, secondary: true, inverted: true },
      y2: { type: NumericAxis, vertical: true, secondary: true },
    }}
  >
    <Rectangle fill="white" margin={1} />
    <Gridlines />
    <Gridlines xAxis="x2" yAxis="y2" />
  </Chart>
</Svg>

Key axis properties:

• secondary — Displays axis at top/right instead of bottom/left
• inverted — Reverses the axis direction (values in descending order)
• vertical — Required for y-axes

Be careful with gridlines when using secondary axes — you may need separate Gridlines components for each axis pair.

Main Chart Elements

Axes

• NumericAxis — For numerical data
• CategoryAxis — For categorical data
• TimeAxis — For date/time data

Graphs (Series)

• LineGraph — Line and area charts
• BarGraph — Horizontal bar series
• ColumnGraph — Vertical column series
• ScatterGraph — Scatter plots

Individual Elements

• Column — Single column in column charts (use when columns differ)
• Bar — Single bar in bar charts (use when bars differ)
• Marker — Point markers for scatter charts, supports dragging
• MarkerLine — Highlight specific values (e.g., min/max)
• Range — Draw rectangular areas (zones)

SVG Elements

• Rectangle — Draw rectangles
• Line — Draw lines

Configuration