You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/radial-chart/README.md
-8Lines changed: 0 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,11 +87,3 @@ Note that currently this is implemented with `@vx/tooltips`'s `withTooltip` HOC,
87
87
88
88
### NOTE ‼️
89
89
Although pie 🍰 and donut 🍩 charts are frequently encountered, they are not the most _effective_ visualization for conveying quantitative information. With that caveat, when used well they can effectively give an overview of population makeup which is an entirely reasonable use of these charts. We don't recommend using >7 slices for user readability.
Copy file name to clipboardExpand all lines: packages/xy-chart/README.md
+11-12Lines changed: 11 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,6 +64,7 @@ width | PropTypes.number.isRequired | - | Required width of the chart (including
64
64
height | PropTypes.number.isRequired | - | Required height of the chart (including margin). Check out `withParentSize` in the examples for responsive charts.
65
65
margin | PropTypes.shape({ top: PropTypes.number, right: PropTypes.number, bottom: PropTypes.number, left: PropTypes.number }) | { top: 64, right: 64, bottom: 64, left: 64 } | chart margin, leave room for axes and labels! note 0 may clip LineSeries and PointSeries.
66
66
renderTooltip | PropTypes.func | - | `({ data, datum, event, color }) => node`, should return the inner tooltip contents on trigger.
67
+
onClick | PropTypes.func | - | `func({ data, datum, event, color [, seriesKey] })`, passed to all child series (or voronoi)
67
68
onMouseMove | PropTypes.func | - | `func({ data, datum, event, color })`, passed to all child series (or voronoi). only needed if you are rolling your own tooltips (see below)
68
69
onMouseLeave | PropTypes.func | - | `func()`, passed to all child series (or voronoi). only needed if you are rolling your own tooltips (see below)
69
70
xScale | scaleShape.isRequired | - | scale config, see below.
@@ -165,6 +166,7 @@ Series | supported x scale type | supported y scale types | data shape | voronoi
165
166
`<BarSeries/>` | time, linear, band | linear | `{ x, y [, fill, stroke] }` | no
166
167
`<LineSeries/>` | time, linear | linear | `{ x, y [, stroke] }` | yes
167
168
`<PointSeries/>` | time, linear | time, linear | `{ x, y [size, fill, stroke, label] }` | yes
169
+
`<AreaSeries/>` | time, linear | linear | `{ x, y [, [stackKey(s)]] }`* | no
168
170
`<StackedBarSeries/>` | band | linear | `{ x, y }` (colors controlled with stackFills & stackKeys) | no
169
171
`<GroupedBarSeries/>` | band | linear | `{ x, y }` (colors controlled with groupFills & groupKeys) | no
170
172
`<CirclePackSeries/>` | time, linear | y is computed | `{ x [, size] }` | no
@@ -174,7 +176,7 @@ Series | supported x scale type | supported y scale types | data shape | voronoi
174
176
- defined `y0` and `y1` values or
175
177
- a single `y` value, in which case its lower bound is set to 0 (a "closed" area series)
176
178
177
-
It is worth noting that voronoi overlays require a defined `y` attribute, so use of voronoi with only `y0` and `y1` values will not work.
179
+
It is worth noting that voronoi overlays require a defined `y` attribute, so use of voronoi with only `y0` and `y1` values will not work.
178
180
179
181
#### CirclePackSeries
180
182
@@ -187,14 +189,19 @@ This series implements the Circle packing algorithm described by <a href="https:
187
189
Note that only `x` values are needed for `CirclePackSeries`, `y` values are computed based on `x` and `size` (if specified). Similar to `PointSeries`, `size`, `fill`, and `fillOpacity` may be set on datum themseleves or passed as props to the `CirclePackSeries` component.
188
190
189
191
190
-
### Tooltips
191
-
Tooltips are supported for all series types, but how you configure them will likely depend on which series combinations you're using and how much customization you need. The _easiest_ way to use tooltips out of the box is by passing a `renderTooltip` function to `<XYChart />` as shown in the above example. This function takes an object with the shape `{ event, datum, data, color }` as input and should return the inner contents of the tooltip (not the tooltip container!) as shown above.
192
+
### Mouse events
193
+
194
+
#### Overview
195
+
`XYChart` and all series support `onMouseMove({ data, datum, event, color [, seriesKey] })`, `onMouseLeave()`, and `onClick({ data, datum, event, color [, seriesKey] })` event handlers. `XYChart` will pass along event handlers to its child series unless a series has `disableMouseEvents` set to `true`, and any event handlers defined at the series level will override those defined at the `XYChart` level.
196
+
197
+
#### Tooltips
198
+
Tooltips are supported for all series types, but how you configure them will likely depend on which series combinations you're using and how much customization you need. The _easiest_ way to use tooltips out of the box is by passing a `renderTooltip` function to `<XYChart />` as shown in the above example. This function takes an object with the shape `{ data, datum, event, color [, seriesKey] }` as input and should return the inner contents of the tooltip (not the tooltip container!) as shown above.
192
199
193
200
Under the covers this will wrap the `<XYChart />` component in the exported `<WithTooltip />` HOC, which wraps the `<svg />` in a `<div />` and handles the positioning and rendering of an HTML-based tooltip with the contents returned by `renderTooltip()`. This tooltip is aware of the bounds of its container and should position itself "smartly".
194
201
195
202
If you'd like more customizability over tooltip rendering you can do either of the following:
196
203
197
-
1) Roll your own tooltip positioning logic and pass `onMouseMove` and `onMouseLeave` functions to `XYChart`. These functions are passed to series-type children and are called with the signature `onMouseMove({ data, datum, event, color })` and `onMouseLeave()` upon appropriate trigger. Note that you must also pass `tooltipData` to `XYChart` if you are using the `CrossHair` component, which has an expected shape of `{ datum }` containing the datum to emphasize.
204
+
1) Roll your own tooltip positioning logic and pass `onMouseMove` and `onMouseLeave` functions to `XYChart`. These functions are passed to series-type children and are called with the signature `onMouseMove({ data, datum, event, color [, seriesKey] })` and `onMouseLeave()` upon appropriate trigger. Note that you must also pass `tooltipData` to `XYChart` if you are using the `CrossHair` component, which has an expected shape of `{ datum }` containing the datum to emphasize.
198
205
199
206
2) Wrap `<XYChart />` with `<WithTooltip />` yourself, which accepts props for additional customization:
200
207
@@ -254,11 +261,3 @@ These <a href="https://github.com/hshoff/vx/blob/master/" target="_blank">vx</a>
0 commit comments