CxJS

Charts Overview

import { Chart, LineGraph, PieChart } from 'cx/charts'; Copied

Charts are an important part of CxJS, extending the SVG package. Rather than providing pre-built chart widgets for each type, CxJS focuses on low-level components that can be assembled into any chart. This gives developers full control over appearance and behavior.

  • Line, bar, and scatter charts are defined inside a Chart widget
  • Pie charts use the PieChart widget

Basic Chart

The Chart widget defines axes and bounds for two-dimensional charts.

<div>
  <Legend.Scope>
    <Svg style="height: 200px; border: 1px solid #ddd">
      <Chart
        margin="10 20 30 50"
        axes={{
          x: { type: NumericAxis },
          y: { type: NumericAxis, vertical: true },
        }}
      >
        <Rectangle fill="white" />
        <Gridlines />
        <LineGraph
          name="Line 1"
          colorIndex={5}
          data={[
            { x: 0, y: 0 },
            { x: 100, y: 100 },
            { x: 200, y: 150 },
          ]}
        />
        <LineGraph
          name="Line 2"
          colorIndex={10}
          data={[
            { x: 0, y: 50 },
            { x: 100, y: 150 },
            { x: 200, y: 100 },
          ]}
        />
      </Chart>
    </Svg>
    <Legend class="mt-4" />
  </Legend.Scope>
</div>
Line 1
Line 2

The most important part is axis configuration. Numeric, category, and time axis types are supported.

Charts consist of multiple child elements. In the example above:

  • Rectangle provides a white background
  • Gridlines adds grid lines
  • LineGraph presents the data

Child elements inherit axis information from the chart and use it for positioning.

Pie Charts

<Legend.Scope>
  <Svg style="height: 200px">
    <ColorMap />
    <PieChart>
      <Repeater
        records={[
          { name: "A", value: 10 },
          { name: "B", value: 20 },
          { name: "C", value: 15 },
        ]}
        recordAlias={m.$record}
      >
        <PieSlice
          name={m.$record.name}
          value={m.$record.value}
          colorMap="pie"
          r={90}
          selection={{
            type: KeySelection,
            bind: m.selected,
            keyField: "name",
            record: m.$record,
          }}
        />
      </Repeater>
    </PieChart>
  </Svg>
  <Legend />
</Legend.Scope>
A
B
C

The Repeater widget iterates over an array and maps it to chart elements. A selection model enables interaction with other widgets on the page.

Legends

import { Legend } from 'cx/charts'; Copied

Legends are context-aware — all legend-aware widgets report information about themselves to populate the legend. Widgets can also report legend actions, making the legend a toggle or selection switch.

Key points:

  • Legend is not SVG-based and should be placed outside the Svg widget
  • Legend.Scope delimits legend scopes when using multiple charts
  • Use unique legend names to separate multiple legends

Color Palettes

CxJS includes a standard palette of 16 colors based on Google Material Design. Colors support hover, selection, and disabled states.

<div style="position: relative; width: 240px; height: 240px; margin: 20px auto">
  {Array.from({ length: 16 }, (_, i) => {
    const angle = (i / 16) * 2 * Math.PI - Math.PI / 2
    const radius = 100
    const x = 120 + radius * Math.cos(angle) - 20
    const y = 120 + radius * Math.sin(angle) - 20
    return (
      <div
        style={`position: absolute; left: ${x}px; top: ${y}px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; text-shadow: 0 0 2px rgba(0,0,0,0.5)`}
        class={`cxs-color-${i}`}
        text={i}
      />
    )
  })}
</div>
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

The ColorMap utility assigns different colors to chart elements with the same colorMap attribute, maximizing color distance between elements.

Main Components

Chart Types:

Axes:

Utilities: