Skip to main content

Tips and Tricks

Custom Fills with SVG defs

If you want to custom SVG definitions available for your components, you can use the svgDefs property on the container, like this:

component.tsx
import { VisXYContainer, VisArea } from '@unovis/react'

function Component(props) {
const data: DataRecord[] = props.data
const svgDefs = `
<linearGradient id="gradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="#051937" />
<stop offset="40%" stop-color="#004d7a" />
<stop offset="60%" stop-color="#008793" />
<stop offset="80%" stop-color="#00bf72" />
</linearGradient>
`
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y

return (
<VisXYContainer svgDefs={svgDefs} data={data}>
<VisArea x={x} y={y} color="url(#gradient)"/>
</VisXYContainer>
)
}
Loading...
note

Alternatively, you can define any defs you want to use in an SVG element on the same page.

<VisArea ... color="url(#gradient)"/>

<svg>
<defs>
<linearGradient id="gradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="#051937" />
<stop offset="40%" stop-color="#004d7a" />
<stop offset="60%" stop-color="#008793" />
<stop offset="80%" stop-color="#00bf72" />
</linearGradient>
</defs>
</svg>

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 XY Component, provide the x property NumericAccessor that returns the data index.
const x = (d: DataRecord, i: number) => i
  • In your Axis component, provide the tickFormat property with a StringAccessor that returns your value. Two common configurations are:

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

const tickFormat = (tick: number) => data[tick].category

Case 2: Your ordinal values are explicitly defined as an array of strings:

const categories = ['A', 'B', 'C', 'D', 'E']
const tickFormat = (tick: number) => categories[tick]

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

component.tsx
<VisXYContainer data={data}>
<VisAxis type="x" tickFormat={tickFormat}/>
<VisStackedBar x={x} y={y}/>
</VisXYContainer>
Loading...