v0.0.159

🚀 Enhancements

• [axis] By default <Axis /> components now use @vx/text to render tick labels. This enables multi line labels and scaling text to fit in a certain amount of space. #260

Example:

<Axis 
  {...axisProps}
  tickLabelProps = (tickValue, index) => ({
    textAnchor: 'middle',
    verticalAnchor: 'middle',
    width: 100,
    scaleToFit: true
  })
/>

• [axis] <Axis /> components got a new prop tickComponent to enable rendering of custom ticks. With this prop one can completely customize ticks without having to create a new custom <Axis /> component. #260

Example:

<Axis
  {...axisProps}
  tickComponent={({ x, y, formattedValue }) => (
    <g>
      <circle cx={x} cy={y} r={2} fill='rebeccapurple' />
      <text x={x + 4} y={y}>{formattedValue}</text>
    </g>
  )}
/>

tickComponent accepts a function and gets called with the following attribute:

tickComponent({ x, y, formattedValue, ...tickLabelPropsObj })

📝 Documentation

• [axis] update @vx/axis documentation. #260
• [demo] fix bargroup example code. #250
• [demo] fix barstack example code. #249
• [text] fix readme.md of @vx/text package. #257

🏆 Contributers

• bulat-f
• sto3psl
• browniefed

Changes:
 - @vx/axis: 0.0.158 => 0.0.159
 - @vx/demo: 0.0.158 => 0.0.159
 - @vx/text: 0.0.153 => 0.0.159
 - @vx/vx: 0.0.158 => 0.0.159