diff --git a/packages/nivo-core/src/components/tooltip/TableTooltip.js b/packages/nivo-core/src/components/tooltip/TableTooltip.js
index 70a136054a..14201c790e 100644
--- a/packages/nivo-core/src/components/tooltip/TableTooltip.js
+++ b/packages/nivo-core/src/components/tooltip/TableTooltip.js
@@ -15,27 +15,33 @@ const tableStyle = {
borderCollapse: 'collapse',
}
-const TableTooltip = ({ title, rows, theme }) => {
+const TableTooltip = ({ title, rows, theme, renderContent }) => {
if (!rows.length) return null
- return (
-
- {title && title}
-
-
- {rows.map((row, i) => (
-
- {row.map((column, j) => (
-
- {column}
- |
- ))}
-
- ))}
-
-
-
- )
+ let content
+ if (typeof renderContent === 'function') {
+ content = renderContent()
+ } else {
+ content = (
+
+ {title && title}
+
+
+ {rows.map((row, i) => (
+
+ {row.map((column, j) => (
+
+ {column}
+ |
+ ))}
+
+ ))}
+
+
+
+ )
+ }
+ return {content}
}
TableTooltip.propTypes = {
@@ -48,6 +54,7 @@ TableTooltip.propTypes = {
tableCell: PropTypes.object.isRequired,
}).isRequired,
}).isRequired,
+ renderContent: PropTypes.func,
}
TableTooltip.defaultProps = {}
diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js
index 36c627b93f..5220e753ef 100644
--- a/packages/nivo-line/src/Line.js
+++ b/packages/nivo-line/src/Line.js
@@ -80,6 +80,7 @@ const Line = ({
// interactivity
isInteractive,
tooltipFormat,
+ tooltip,
// stackTooltip
enableStackTooltip,
@@ -147,6 +148,7 @@ const Line = ({
hideTooltip={hideTooltip}
theme={theme}
tooltipFormat={tooltipFormat}
+ tooltip={tooltip}
/>
)}
{enableDots && (
diff --git a/packages/nivo-line/src/LineSlices.js b/packages/nivo-line/src/LineSlices.js
index 45953d294b..8cdfcb8c96 100644
--- a/packages/nivo-line/src/LineSlices.js
+++ b/packages/nivo-line/src/LineSlices.js
@@ -11,7 +11,15 @@ import PropTypes from 'prop-types'
import pure from 'recompose/pure'
import LineSlicesItem from './LineSlicesItem'
-const LineSlices = ({ slices, height, showTooltip, hideTooltip, theme, tooltipFormat }) => (
+const LineSlices = ({
+ slices,
+ height,
+ showTooltip,
+ hideTooltip,
+ theme,
+ tooltip,
+ tooltipFormat,
+}) => (
{slices.map(slice => (
))}
@@ -45,6 +54,8 @@ LineSlices.propTypes = {
showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
+ tooltip: PropTypes.element,
+ tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
}
export default pure(LineSlices)
diff --git a/packages/nivo-line/src/LineSlicesItem.js b/packages/nivo-line/src/LineSlicesItem.js
index 85d980be28..b1465902da 100644
--- a/packages/nivo-line/src/LineSlicesItem.js
+++ b/packages/nivo-line/src/LineSlicesItem.js
@@ -21,7 +21,7 @@ const Chip = ({ color }) => (
)
-const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover }) => (
+const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover, tooltip }) => (
{isHover && (
{
- const format =
- !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format(tooltipFormat)
- const hasValues = slice.points.some(p => p.value !== null)
+ withPropsOnChange(
+ ['slice', 'theme', 'tooltip', 'tooltipFormat'],
+ ({ slice, theme, tooltip, tooltipFormat }) => {
+ const format =
+ !tooltipFormat || isFunction(tooltipFormat)
+ ? tooltipFormat
+ : d3Format(tooltipFormat)
+ const hasValues = slice.points.some(p => p.value !== null)
- return {
- tooltip: hasValues ? (
- p.value !== null)
- .map(p => [
- ,
- p.id,
- format ? format(p.value) : p.value,
- ])}
- />
- ) : null,
+ return {
+ tooltipElement: hasValues ? (
+ p.value !== null)
+ .map(p => [
+ ,
+ p.id,
+ format ? format(p.value) : p.value,
+ ])}
+ format={format}
+ renderContent={
+ typeof tooltip === 'function' ? tooltip.bind(null, { ...slice }) : null
+ }
+ />
+ ) : null,
+ }
}
- }),
+ ),
withHandlers({
- showTooltip: ({ showTooltip, setIsHover, tooltip }) => e => {
+ showTooltip: ({ showTooltip, setIsHover, tooltipElement }) => e => {
setIsHover(true)
- showTooltip(tooltip, e)
+ showTooltip(tooltipElement, e)
},
hideTooltip: ({ hideTooltip, setIsHover }) => () => {
setIsHover(false)
diff --git a/packages/nivo-line/src/props.js b/packages/nivo-line/src/props.js
index 15caedd079..3fe78276fe 100644
--- a/packages/nivo-line/src/props.js
+++ b/packages/nivo-line/src/props.js
@@ -79,6 +79,7 @@ export const LinePropTypes = {
// interactivity
isInteractive: PropTypes.bool.isRequired,
enableStackTooltip: PropTypes.bool.isRequired,
+ tooltip: PropTypes.func,
tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
diff --git a/packages/nivo-line/stories/line.stories.js b/packages/nivo-line/stories/line.stories.js
index 3ebb9668da..6675ea43ee 100644
--- a/packages/nivo-line/stories/line.stories.js
+++ b/packages/nivo-line/stories/line.stories.js
@@ -271,3 +271,30 @@ stories.add('with formatted values', () => (
}
/>
))
+
+stories.add('with custom tooltip', () => (
+ {
+ return (
+
+
{slice.id}
+ {slice.points.map((e, i) => (
+
+ {e.id}: {e.value}
+
+ ))}
+
+ )
+ }}
+ theme={{
+ tooltip: {
+ container: {
+ border: '1px solid red',
+ },
+ },
+ }}
+ />
+))
diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js
index 96864fb19d..d161ab2c67 100644
--- a/website/src/components/charts/line/props.js
+++ b/website/src/components/charts/line/props.js
@@ -378,5 +378,13 @@ export default [
controlType: 'switch',
controlGroup: 'Interactivity',
},
+ {
+ key: 'tooltip',
+ scopes: ['Line'],
+ description: `Method to create custom tooltip`,
+ type: '{Function}',
+ required: false,
+ default: defaults.tooltip,
+ },
...motionProperties(['Line'], defaults),
]