Tips and Tricks

Displaying Ordinal Values

We don't natively support the ordinal scale for XY components, but it can still be achieved with some small tweaks.

• In your component, provide the x property NumericAccessor that returns the data index.

const x = (d: DataRecord, i: number) => i

• In your Axis component, provide the tickValues property set to the array of data indices, and the tickFormat property with a StringAccessor that returns your value. This ensures all labels are visible regardless of chart width. Two common configurations are:

When your data is an array of objects containing your ordinal property:

const tickValues = data.map((_, i) => i)
const tickFormat = (tick: number) => data[tick].category

Then we apply these adjustments to a basic Stacked Bar chart with an X Axis component, the result looks like:

React

component.tsx

<VisXYContainer data={data}>
  <VisAxis type="x" tickValues={[0,1,2,3,4]} tickFormat={tickFormat}/>
  <VisStackedBar x={x} y={y}/>
</VisXYContainer>

Angular

template.html

<vis-xy-container [data]="data">
  <vis-axis
  type="x" 
  [tickValues]="[0,1,2,3,4]" 
  [tickFormat]="tickFormat"
></vis-axis>
  <vis-stacked-bar [x]="x" [y]="y"></vis-stacked-bar>
</vis-xy-container>

Svelte

component.svelte

<VisXYContainer {data}>
  <VisAxis type="x" tickValues={[0,1,2,3,4]} {tickFormat}/>
  <VisStackedBar {x} {y}/>
</VisXYContainer>

Vue

component.vue

<VisXYContainer :data="data">
  <VisAxis
    type="x" 
    :tickValues="[0,1,2,3,4]" 
    :tickFormat="tickFormat"
   />
  <VisStackedBar :x="x" :y="y" />
</VisXYContainer>

Solid

component.tsx

<VisXYContainer data={data}>
  <VisAxis type="x" tickValues={[0,1,2,3,4]} tickFormat={tickFormat}/>
  <VisStackedBar x={x} y={y}/>
</VisXYContainer>

TypeScript

component.ts

const container = new XYContainer<DataRecord>(node, {
  xAxis: new Axis({ type: "x", tickValues: [0,1,2,3,4], tickFormat }), 
  components: [new StackedBar({ x, y })]
}, data)

Loading...