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...