diff --git a/packages/nivo-stream/package.json b/packages/nivo-stream/package.json
index f35e4b2df..0a4cad5a4 100644
--- a/packages/nivo-stream/package.json
+++ b/packages/nivo-stream/package.json
@@ -7,6 +7,7 @@
"jsnext:main": "es/index.js",
"dependencies": {
"@nivo/core": "0.32.0",
+ "@nivo/legends": "0.33.0-0",
"d3-format": "^1.2.0",
"d3-scale": "^1.0.6",
"d3-shape": "^1.2.0",
diff --git a/packages/nivo-stream/src/Stream.js b/packages/nivo-stream/src/Stream.js
index 029e2f226..1dab21f22 100644
--- a/packages/nivo-stream/src/Stream.js
+++ b/packages/nivo-stream/src/Stream.js
@@ -11,6 +11,7 @@ import { min, max, range, sortBy } from 'lodash'
import { bindDefs } from '@nivo/core'
import { Container, SvgWrapper } from '@nivo/core'
import { Axes, Grid } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
import StreamLayers from './StreamLayers'
import StreamSlices from './StreamSlices'
import { StreamPropTypes } from './props'
@@ -59,6 +60,8 @@ const Stream = ({
// stack tooltip
enableStackTooltip,
+
+ legends,
}) => {
const enhancedLayers = layers.map((points, i) => {
const layer = points.map((point, i) => ({
@@ -148,6 +151,22 @@ const Stream = ({
tooltipFormat={tooltipFormat}
/>
)}
+ {legends.map((legend, i) => {
+ const legendData = enhancedLayers.map(l => ({
+ label: l.id,
+ fill: l.color,
+ })).reverse()
+
+ return (
+
The responsive alternative of this component is ResponsiveStream
.
+ See the dedicated guide on how to setup + legends for this component. +
) diff --git a/website/src/components/charts/stream/defaultProps.js b/website/src/components/charts/stream/defaultProps.js index ee0ef192a..79be94bde 100644 --- a/website/src/components/charts/stream/defaultProps.js +++ b/website/src/components/charts/stream/defaultProps.js @@ -11,7 +11,7 @@ import { patternDotsDef, patternSquaresDef } from '@nivo/core' export default { margin: { top: 50, - right: 60, + right: 110, bottom: 50, left: 60, },