@vx/responsive

@vx/responsive

npm install --save @vx/responsive

The @vx/responsive package is here to help you make responsive graphs.

If you would like your graph to adapt to the screen size, you can use withScreenSize() to take an element and attach events that will resize the graph to maintain the same size of the screen.

Example:

import { withScreenSize } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// Responsive.withScreenSize(...);

let chartToRender = withScreenSize(MySuperCoolVxChart);

// ... Render the chartToRender somewhere

You can also create a responsive chart with a specific viewBox with the <ScaleSVG /> component.

Example:

import { ScaleSVG } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// <Responsive.ScaleSVG />

let chartToRender = (
  <ScaleSVG
    width={400}
    height={400}
  >
    <MySuperCoolVXChart/>
  </ScaleSVG>
)

Changelog

v0.0.150

:boom: Breaking Changes

• [text] Removes <TextWrap>, <TextOutline> and <TextBackground> components, which were incomplete #208

:rocket: Enhancements

• [geo] Added pointRadius and fixed center #213
• [text] Add new <Text>, with the following features
  • Word-wrapping (when width prop is defined)
  • Vertical alignment (verticalAnchor prop)
  • Rotation (angle prop)
  • Scale-to-fit text (scaleToFit prop)

:bug: Bug Fix

• [geo] Fixed center typo #213

:memo: Documentation

• [responsive] Backticks import not working so, copy paste broken #212

:house: Internal

• [text] Update vx-text author to @techniq #210

Changes:
 - @vx/demo: 0.0.149 => 0.0.150
 - @vx/geo: 0.0.143 => 0.0.150
 - @vx/responsive: 0.0.149 => 0.0.150
 - @vx/text: 0.0.143 => 0.0.150
 - @vx/vx: 0.0.149 => 0.0.150