victory-chart - npm Package Versions

36.0.1 (2021-09-17)

• #1967 - Updates events propTypes for VictoryPie. Thanks @tgalfin!

36.0.0 (2021-09-07)

• #1940 - Refactor VictoryChart, VictoryGroup and VictoryStack to take advantage of React.memo.

35.0.2 (2020-06-30)

• #1631 - Correct types for TextSize utility. Thanks @jlismore!

35.0.1 (2020-06-27)

• #1628 - Correct typescript error

35.0.0 (2020-06-27)

Label and Theme Improvements!

This release introduces new label features and makes improvements to themes. This release includes breaking style changes. Please double check your label and tooltip styles when upgrading. Polar axes and pie charts may be particularly impacted.

New Features!

• VictoryLabel now supports label backgrounds, which are rendered as rect elements behind your labels. Backgrounds are styled via the new backgroundStyle prop on VictoryLabel. This prop may be given as a style object, or an array of objects for styling multi-line labels. Background elements are sized for their corresponding text elements, but padding may also be added with the backgroundPadding prop, which accepts a single number, an object with values for "top", "bottom", "left" and "right", or an array of either of these for adding background padding to multi-line labels.

• VictoryTooltip has a new flyoutPadding prop that may be used to add padding between the edge of the flyout and the label within it. The flyoutPadding prop may be given as a single number of as an object with values for "top", "bottom", "left" and "right". This is a breaking change, as style.padding no longer adds padding between the flyout and its label. Both of Victory's built-in themes have been altered so that tooltips get flyoutPadding={5} by default.

• VictoryPie now supports the labelPlacement prop used in polar charts. Possible values are "vertical" "parallel" and "perpendicular". When not given, vertical labels are rendered as before.

• Themes now support polarAxis, polarDependentAxis, and polarIndependentAxis namespaces that are merges with the less specific axis, dependentAxis, and independentAxis themes as appropriate.

Improvements

• Changes Victory's default branch from master to main 🖤

• Textsize approximations have changed, and are much more accurate in most cases. This may be a breaking change for layouts that depended on approximated text size

• Tooltip themes are now correctly merged with label styles and props.

• VictoryPolarAxis elements are now rendered relative to the origin independently, rather than being translated as a group. This allows for correct positioning of elements within VictoryPortal This may be a breaking change for custom components in VictoryPolarAxis

• Corrects the labelPosition prop on VictoryPie (previously startAngle and endAngle were inverted) This is a breaking change

• Alters material and greyscale themes. The following theme updates may cause breaking style changes

  • Uses more widely available default fonts for labels
  • Reduces default label padding for boxplot and candlestick
  • Adds polarDependentAxis settings to the material theme
  • Zero padding on from tooltip styles override label styles on all other theme namespaces. This means that tooltips pointers will now all start exactly at the data element they correspond to by default. To alter this behavior, either 1) provide a different theme, 2) alter padding in via label styles like so:

      <VictoryBar
        style={{ labels: { padding: 5 } }}
        labelComponent={<VictoryTooltip />}
      />
    

    or

    <VictoryBar
      labelComponent={
        <VictoryTooltip style={{ padding: 5 }} />
      }
    />
    

Associated PRs

• #1583 - Initial label background work
• #1625 - Label and theme improvements
• #1627 - Switch CI to main

34.0.0 (2019-12-20)

Breaking Changes

This version uses the context API introduced in react@16.3.0

• #1462 - Updates to the new context API. Thanks @fabianishere!

33.0.0 (2019-08-21)

Breaking Changes

Changes for functional props and styles:

Related PR: #1360

Functional props like labels and functional styles will now be called with a single argument instead of datum and active. The argument passed to functional props and styles will be an object containing all the props that control the rendering of the the target the prop applies to. Including things like datum, active, index, data, scale, etc. We hope this will give users a lot more flexibility and control. In most cases, this change should be very straightforward to apply

old:

labels={(d) => `x: ${d.x}`}

new

labels={({ datum }) => `x: ${datum.x}`}

Gotchas:

• Some of the props passed into functional props and styles may themselves be functions. These will not be evaluated, because we have no way to determine evaluation order. So, if you create a cornerRadius function that depends on barWidth, do not also make barWidth a function of some other prop.
• A few props that take functions do not follow this pattern. These include data accessor functions like y and x, and tickFormat. The arguments for these props have not changed.

Changes for VictoryCandlestick labels

Related PR: #1295

VictoryCandlestick now has granular support for labels corresponding to each portion of the candle. The current labels and labelComponent props will be joined by new props corresponding to each part of the candle. New props lowLabels lowLabelComponent highLabels highLabelComponent openLabels openLabelComponent closeLabels closeLabelComponent

This will be a breaking change affecting the positioning of the default label. In earlier versions, the default label was positioned above the candle, it will now be positioned next to the center of the candle. To use older label positioning, use highLabels / highLabelComponent rather than label / labelComponent. If you are using tooltips with VictoryCandlestick, you will need to register a custom event to trigger your highLabels tooltip:

example:

<VictoryCandlestick
  highLabels={({ datum }) => datum.high}
  highLabelComponent={<VictoryTooltip />}
  events={[{
    target: "data",
    eventHandlers: {
      onMouseOver: () => ({ target: "highLabels", mutation: () => ({ active: true }) }),
      onMouseOut: () => ({ target: "highLabels", mutation: () => ({ active: false }) })
    }
  }]}
/>

The style prop for VictoryCandlestick now also has namespaces for the new labels in addition to the current labels namespace. When both labels and specific label styles (e.g. highLabels) are provided, the styles will be merged

Changes for VictoryVoronoiContainer

Related PR: #1371

Before this version VictoryVoronoiContainer had limited functionality for mouse-following tooltips, and for constraining a tooltip to the chart area, but it was only usable for multi-point tooltips (with voronoiDimension), and was not user configurable. This version aims to correct these limitations:

• mouseFollowTooltips: This new boolean prop on VictoryVoronoiContainer determines whether the labels should follow the mouse position or snap into place. (Note that in charts using voronoiDimension, the tooltip still follows the mouse in the non-voronoiDimension, as demonstrated in the charts below (both with voronoiDimension="x")

mouseFollowLabels={true}

mouseFollowTooltips={false}

• constrained tooltips: multi-point tooltips rendered by VictoryVoronoiContainer will no longer be constrained to the chart area by default. Instead, add the constrainToVisibleArea prop to VictoryTooltip to enable this behavior for both multi-point and single point tooltips: example:

containerComponent={
  <VictoryVoronoiContainer
    labelComponent={<VictoryTooltip constrainToVisibleArea />}
  />
}

Changes for VictoryTooltip and VictoryLabel

Related PR:#1371

The changes we wanted to make to support new behaviors in VictoryVoronoiContainer required some changes to VictoryTooltip and VictoryLabel

New props for VictoryTooltip:

• constrainToVisibleArea is a boolean prop that, when true, will alter the position of the tooltip so that it exactly fits within the svg Victory renders. The tooltip's center will be moved, but the pointer will remain pointing at the associated x, y value of the tooltip. When this prop is set to true, pointerLength may not be respected

• center is a prop that may be given as an object with values or functions for "x" and "y". When this prop is set, it will position the center of the tooltip (centered around the main body of the tooltip, minus the pointer). When this prop is not set, it will be calculated from other props such as x, y, pointerLength, etc. This prop was added to enable mouse-following tooltips in VictoryVoronoiContainer.

• centerOffset is a prop that may be given as an object with values or functions for "x" and "y". When this prop is set, the center of the tooltip will be offset by some amount from the x, y value it points to, resulting in a slanted pointer. When this prop is set, pointerLength will not be respected (because the pointer will be slanted)

• flyoutHeight (formerly height): This optional prop determines the height of the tooltip flyout (minus pointer). The name of this prop was changed so that it would not conflict with the height prop now passed to VictoryTooltip by its parents

• flyoutWidth (formerly width): This optional prop determines the width of the tooltip flyout (minus pointer). The name of this prop was changed so that it would not conflict with the width prop now passed to VictoryTooltip by its parents

• width: the overall width of the parent svg. This prop will be passed down from any victory component that uses VictoryTooltip as a label

• height: the overall height of the parent svg. This prop will be passed down from any victory component that uses VictoryTooltip as a label

Changes Affecting VictoryLabel and VictoryTooltip

• The x and y values passed to labels by their parent components have all been adjusted so that their values match the position of the data point they correspond to. All padding is now accounted for in the dx and dy props instead of being added directly to x and y. This will be a breaking change for anyone who is wrapping label components and relying on the x and y props they receive, or providing their own dx / dy props. These breaking changes may take a bit of manual adjustment to correct, but we hope this change will make label positioning easier to reason about in the long run.

Other Changes We have been concurrently working on improving performance and the stability of events in victory-native. The following changes have been added to support these efforts:

Related PR: #1373

• A prependDefaultAxes boolean prop has been added to VictoryChart. This prop will be set true by default in victory-native to reduce the possibility of axis elements to interfere with events.
• Invisible ticks and grids will no longer be rendered unless they have events attached to them. This is again to reduce interference with events.

Related PR: #1365

• Swapped out React component primitives (Bar, Path etc) with for function primitives to match performance-improving changes in victory-native. (This is a breaking change for anyone extending from victory components)

32.2.0 (2019-04-10)

#1292 Reverses the render order for children of VictoryStack. This may cause minor visual changes for stacked charts, but should be an improvement for most users, as stokes and labels will no longer be cut off by higher stacks being rendered after lower stacks

#1293 Fixes a bug related to custom labelComponent rendering in VictoryLegend