diff --git a/packages/sunburst/src/Sunburst.tsx b/packages/sunburst/src/Sunburst.tsx
index e672e456cc..9be4f19627 100644
--- a/packages/sunburst/src/Sunburst.tsx
+++ b/packages/sunburst/src/Sunburst.tsx
@@ -12,6 +12,7 @@ const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
         data,
         id,
         value,
+        valueFormat,
 
         colors,
         childColor,
@@ -37,13 +38,14 @@ const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
         role,
 
         // interactivity
-        tooltipFormat,
+        isInteractive,
         tooltip,
 
         // event handlers
         onClick,
         onMouseEnter,
         onMouseLeave,
+        onMouseMove,
     } = { ...defaultProps, ...props }
 
     const { innerWidth, innerHeight, margin } = useDimensions(width, height, partialMargin)
@@ -60,8 +62,9 @@ const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
         cornerRadius,
         data,
         id,
-        value,
         radius,
+        value,
+        valueFormat,
     })
 
     const boundDefs = bindDefs(defs, nodes, fill, {
@@ -82,11 +85,13 @@ const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
                             arcGenerator={arcGenerator}
                             borderWidth={borderWidth}
                             borderColor={borderColor}
-                            tooltipFormat={tooltipFormat}
+                            isInteractive={isInteractive}
                             tooltip={tooltip}
                             onClick={onClick}
                             onMouseEnter={onMouseEnter}
                             onMouseLeave={onMouseLeave}
+                            onMouseMove={onMouseMove}
+                            valueFormat={valueFormat}
                         />
                     ))}
                 {enableSliceLabels && (
@@ -109,7 +114,7 @@ export const Sunburst = <RawDatum,>({
     theme,
     ...otherProps
 }: SvgProps<RawDatum>) => (
-    <Container theme={theme} {...{ isInteractive, animate, motionConfig }}>
+    <Container {...{ isInteractive, animate, motionConfig, theme }}>
         <InnerSunburst<RawDatum> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )
diff --git a/packages/sunburst/src/SunburstArc.tsx b/packages/sunburst/src/SunburstArc.tsx
index 2a3ed3a60f..bbbcdbbd9b 100644
--- a/packages/sunburst/src/SunburstArc.tsx
+++ b/packages/sunburst/src/SunburstArc.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
-import { BasicTooltip, useTooltip } from '@nivo/tooltip'
 import { animated } from 'react-spring'
 import { useAnimatedPath } from '@nivo/core'
+import { useEventHandlers } from './hooks'
 import { SunburstArcProps } from './types'
 
 export const SunburstArc = <RawDatum,>({
@@ -9,34 +9,12 @@ export const SunburstArc = <RawDatum,>({
     arcGenerator,
     borderWidth,
     borderColor,
-    tooltip: _tooltip,
-    tooltipFormat,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
+    ...props
 }: SunburstArcProps<RawDatum>) => {
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
-
     const path = useMemo(() => arcGenerator(node), [arcGenerator, node])
-    const tooltip = useMemo(
-        () => (
-            <BasicTooltip
-                id={node.data.id}
-                value={`${node.data.percentage.toFixed(2)}%`}
-                enableChip={true}
-                color={node.data.color}
-                format={tooltipFormat}
-                renderContent={
-                    typeof _tooltip === 'function'
-                        ? _tooltip.bind(null, { ...node.data })
-                        : undefined
-                }
-            />
-        ),
-        [_tooltip, node.data, tooltipFormat]
-    )
 
     const animatedPath = useAnimatedPath(path ?? '')
+    const handlers = useEventHandlers({ data: node.data, ...props })
 
     if (!path) {
         return null
@@ -48,16 +26,7 @@ export const SunburstArc = <RawDatum,>({
             fill={node.data.fill ?? node.data.color}
             stroke={borderColor}
             strokeWidth={borderWidth}
-            onMouseEnter={event => {
-                onMouseEnter?.(node.data, event)
-                showTooltipFromEvent(tooltip, event)
-            }}
-            onMouseMove={event => showTooltipFromEvent(tooltip, event)}
-            onMouseLeave={event => {
-                onMouseLeave?.(node.data, event)
-                hideTooltip()
-            }}
-            onClick={event => onClick?.(node.data, event)}
+            {...handlers}
         />
     )
 }
diff --git a/packages/sunburst/src/SunburstTooltip.tsx b/packages/sunburst/src/SunburstTooltip.tsx
new file mode 100644
index 0000000000..df1b8c9e19
--- /dev/null
+++ b/packages/sunburst/src/SunburstTooltip.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { BasicTooltip } from '@nivo/tooltip'
+import { DataProps, NormalizedDatum } from './types'
+
+export const SunburstTooltip = <RawDatum,>({
+    color,
+    id,
+    formattedValue,
+    percentage,
+    valueFormat,
+}: NormalizedDatum<RawDatum> & Pick<DataProps<RawDatum>, 'valueFormat'>) => (
+    <BasicTooltip
+        id={id}
+        value={valueFormat ? formattedValue : `${percentage.toFixed(2)}%`}
+        enableChip={true}
+        color={color}
+    />
+)
diff --git a/packages/sunburst/src/hooks.ts b/packages/sunburst/src/hooks.ts
index a730abc229..b1fed088dd 100644
--- a/packages/sunburst/src/hooks.ts
+++ b/packages/sunburst/src/hooks.ts
@@ -1,17 +1,85 @@
 import sortBy from 'lodash/sortBy'
 import cloneDeep from 'lodash/cloneDeep'
-import { getAccessorFor, useTheme } from '@nivo/core'
+import React, { createElement, useCallback, useMemo } from 'react'
+import { getAccessorFor, useTheme, useValueFormatter } from '@nivo/core'
 import { arc } from 'd3-shape'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
-import { useMemo } from 'react'
+import { useTooltip } from '@nivo/tooltip'
 import { partition as d3Partition, hierarchy as d3Hierarchy } from 'd3-hierarchy'
-import { CommonProps, ComputedDatum, DataProps, NormalizedDatum } from './types'
+import { CommonProps, ComputedDatum, DataProps, NormalizedDatum, MouseEventHandlers } from './types'
 
 type MaybeColor = { color?: string }
 
 const pick = <T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> =>
     keys.reduce((acc, prop) => ({ ...acc, [prop]: obj[prop] }), {} as Pick<T, K>)
 
+export const useEventHandlers = <RawDatum>({
+    data,
+    isInteractive,
+    onClick: onClickHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseMove: onMouseMoveHandler,
+    tooltip,
+    valueFormat,
+}: Pick<CommonProps<RawDatum>, 'isInteractive' | 'tooltip'> &
+    MouseEventHandlers<RawDatum, SVGPathElement> & {
+        data: NormalizedDatum<RawDatum>
+        valueFormat?: DataProps<RawDatum>['valueFormat']
+    }) => {
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+
+    const handleTooltip = useCallback(
+        (event: React.MouseEvent<SVGPathElement>) =>
+            showTooltipFromEvent(createElement(tooltip, { ...data, valueFormat }), event),
+        [data, showTooltipFromEvent, tooltip, valueFormat]
+    )
+
+    const onClick = useCallback(
+        (event: React.MouseEvent<SVGPathElement>) => onClickHandler?.(data, event),
+        [data, onClickHandler]
+    )
+    const onMouseEnter = useCallback(
+        (event: React.MouseEvent<SVGPathElement>) => {
+            onMouseEnterHandler?.(data, event)
+            handleTooltip(event)
+        },
+        [data, handleTooltip, onMouseEnterHandler]
+    )
+    const onMouseLeave = useCallback(
+        (event: React.MouseEvent<SVGPathElement>) => {
+            onMouseLeaveHandler?.(data, event)
+            hideTooltip()
+        },
+        [data, hideTooltip, onMouseLeaveHandler]
+    )
+    const onMouseMove = useCallback(
+        (event: React.MouseEvent<SVGPathElement>) => {
+            onMouseMoveHandler?.(data, event)
+            handleTooltip(event)
+        },
+        [data, handleTooltip, onMouseMoveHandler]
+    )
+
+    return useMemo(() => {
+        if (!isInteractive) {
+            return {
+                onClick: undefined,
+                onMouseEnter: undefined,
+                onMouseLeave: undefined,
+                onMouseMove: undefined,
+            }
+        }
+
+        return {
+            onClick,
+            onMouseEnter,
+            onMouseLeave,
+            onMouseMove,
+        }
+    }, [isInteractive, onClick, onMouseEnter, onMouseLeave, onMouseMove])
+}
+
 export const useSunburst = <RawDatum extends MaybeColor>({
     childColor,
     colors,
@@ -19,15 +87,17 @@ export const useSunburst = <RawDatum extends MaybeColor>({
     data,
     id,
     value,
+    valueFormat,
     radius,
 }: {
     childColor: CommonProps<RawDatum>['childColor']
     colors: CommonProps<RawDatum>['colors']
     cornerRadius: CommonProps<RawDatum>['cornerRadius']
     data: DataProps<RawDatum>['data']
-    id: DataProps<RawDatum>['id']
+    id: NonNullable<DataProps<RawDatum>['id']>
     radius: number
-    value: DataProps<RawDatum>['value']
+    value: NonNullable<DataProps<RawDatum>['value']>
+    valueFormat: DataProps<RawDatum>['valueFormat']
 }) => {
     const theme = useTheme()
     const getColor = useOrdinalColorScale(colors, 'id')
@@ -38,43 +108,60 @@ export const useSunburst = <RawDatum extends MaybeColor>({
     const getId = useMemo(() => getAccessorFor(id), [id])
     const getValue = useMemo(() => getAccessorFor(value), [value])
 
+    const formatValue = useValueFormatter(valueFormat)
+
     const nodes = useMemo(() => {
         const partition = d3Partition<RawDatum>().size([2 * Math.PI, radius * radius])
         const hierarchy = d3Hierarchy(data).sum(getValue)
+        const descendants = partition(cloneDeep(hierarchy)).descendants()
         const total = hierarchy.value ?? 0
 
-        return sortBy(partition(cloneDeep(hierarchy)).descendants(), 'depth').reduce<
-            Array<ComputedDatum<RawDatum>>
-        >((acc, descendant) => {
-            // Maybe the types are wrong from d3, but value prop is always present, but types make it optional
-            const node = {
-                value: 0,
-                ...pick(descendant, 'x0', 'y0', 'x1', 'y1', 'depth', 'height', 'parent', 'value'),
-            }
+        return sortBy(descendants, 'depth').reduce<Array<ComputedDatum<RawDatum>>>(
+            (acc, descendant) => {
+                // Maybe the types are wrong from d3, but value prop is always present, but types make it optional
+                const node = {
+                    value: 0,
+                    ...pick(
+                        descendant,
+                        'x0',
+                        'y0',
+                        'x1',
+                        'y1',
+                        'depth',
+                        'height',
+                        'parent',
+                        'value'
+                    ),
+                }
 
-            const { value } = node
-            const id = getId(descendant.data)
-            const data = {
-                depth: node.depth,
-                id,
-                percentage: (100 * value) / total,
-                value,
-            }
+                const { value } = node
+                const id = getId(descendant.data)
+                const data = {
+                    color: descendant.data.color,
+                    data: descendant.data,
+                    depth: node.depth,
+                    formattedValue: formatValue(value),
+                    id,
+                    percentage: (100 * value) / total,
+                    value,
+                }
 
-            const parent = acc.find(
-                computed => node.parent && computed.data.id === getId(node.parent.data)
-            )
+                const parent = acc.find(
+                    computed => node.parent && computed.data.id === getId(node.parent.data)
+                )
 
-            const color =
-                node.depth === 1 || childColor === 'noinherit'
-                    ? getColor(data)
-                    : parent
-                    ? getChildColor(parent.data)
-                    : descendant.data.color
+                const color =
+                    node.depth === 1 || childColor === 'noinherit'
+                        ? getColor(data)
+                        : parent
+                        ? getChildColor(parent.data)
+                        : descendant.data.color
 
-            return [...acc, { ...node, data: { ...data, color, parent } }]
-        }, [])
-    }, [data, childColor, getChildColor, getColor, getId, getValue, radius])
+                return [...acc, { ...node, data: { ...data, color, parent } }]
+            },
+            []
+        )
+    }, [radius, data, getValue, getId, formatValue, childColor, getColor, getChildColor])
 
     const arcGenerator = useMemo(
         () =>
diff --git a/packages/sunburst/src/index.ts b/packages/sunburst/src/index.ts
index bf96819659..d876030db3 100644
--- a/packages/sunburst/src/index.ts
+++ b/packages/sunburst/src/index.ts
@@ -1,4 +1,5 @@
 export * from './Sunburst'
 export * from './ResponsiveSunburst'
+export * from './hooks'
 export * from './props'
 export * from './types'
diff --git a/packages/sunburst/src/props.ts b/packages/sunburst/src/props.ts
index 4f16611741..4d6ec537d2 100644
--- a/packages/sunburst/src/props.ts
+++ b/packages/sunburst/src/props.ts
@@ -1,3 +1,5 @@
+import { SunburstTooltip } from './SunburstTooltip'
+
 export type DefaultSunburstProps = Required<typeof defaultProps>
 
 export const defaultProps = {
@@ -15,10 +17,12 @@ export const defaultProps = {
 
     // slices labels
     enableSliceLabels: false,
-    sliceLabel: 'value',
+    sliceLabel: 'formattedValue',
     sliceLabelsTextColor: { theme: 'labels.text.fill' },
 
     isInteractive: true,
     animate: false,
     motionConfig: 'gentle',
+
+    tooltip: SunburstTooltip,
 } as const
diff --git a/packages/sunburst/src/types.ts b/packages/sunburst/src/types.ts
index 612a96e9a4..6c9d79f8ba 100644
--- a/packages/sunburst/src/types.ts
+++ b/packages/sunburst/src/types.ts
@@ -14,18 +14,25 @@ export type DatumId = string | number
 export type DatumValue = number
 
 export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
-export type LabelAccessorFunction<RawDatum> = (datum: ComputedDatum<RawDatum>) => string | number
+export type LabelAccessorFunction<RawDatum> = (datum: RawDatum) => string | number
 
 export interface DataProps<RawDatum> {
     data: RawDatum
-    id: string | number | DatumPropertyAccessor<RawDatum, DatumId>
-    value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
+    id?: string | number | DatumPropertyAccessor<RawDatum, DatumId>
+    value?: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
+    valueFormat?: string | DataFormatter
+}
+
+export interface ChildrenDatum<RawDatum> {
+    children?: Array<RawDatum & ChildrenDatum<RawDatum>>
 }
 
 export interface NormalizedDatum<RawDatum> {
     color?: string
+    data: RawDatum & ChildrenDatum<RawDatum>
     depth: number
     id: DatumId
+    formattedValue: string | number
     fill?: string
     parent?: ComputedDatum<RawDatum>
     percentage: number
@@ -49,7 +56,7 @@ export type CommonProps<RawDatum> = {
 
     cornerRadius: number
 
-    colors: OrdinalColorScaleConfig<Omit<NormalizedDatum<RawDatum>, 'color' | 'fill' | 'parent'>>
+    colors: OrdinalColorScaleConfig<Omit<NormalizedDatum<RawDatum>, 'fill' | 'parent'>>
     borderWidth: number
     borderColor: string
 
@@ -66,8 +73,7 @@ export type CommonProps<RawDatum> = {
     theme: Theme
 
     isInteractive: boolean
-    tooltipFormat: DataFormatter
-    tooltip: (payload: NormalizedDatum<RawDatum>) => JSX.Element
+    tooltip: (props: NormalizedDatum<RawDatum>) => JSX.Element
 }
 
 export type MouseEventHandler<RawDatum, ElementType> = (
@@ -79,6 +85,7 @@ export type MouseEventHandlers<RawDatum, ElementType> = Partial<{
     onClick: MouseEventHandler<RawDatum, ElementType>
     onMouseEnter: MouseEventHandler<RawDatum, ElementType>
     onMouseLeave: MouseEventHandler<RawDatum, ElementType>
+    onMouseMove: MouseEventHandler<RawDatum, ElementType>
 }>
 
 export type SvgProps<RawDatum> = DataProps<RawDatum> &
@@ -90,17 +97,18 @@ export type SvgProps<RawDatum> = DataProps<RawDatum> &
 
 export type SunburstArcProps<RawDatum> = Pick<
     SvgProps<RawDatum>,
-    | 'tooltip'
-    | 'tooltipFormat'
     | 'onClick'
     | 'onMouseEnter'
     | 'onMouseLeave'
+    | 'onMouseMove'
     | 'borderWidth'
     | 'borderColor'
-> & {
-    arcGenerator: Arc<any, ComputedDatum<RawDatum>>
-    node: ComputedDatum<RawDatum>
-}
+    | 'valueFormat'
+> &
+    Pick<CommonProps<RawDatum>, 'isInteractive' | 'tooltip'> & {
+        arcGenerator: Arc<any, ComputedDatum<RawDatum>>
+        node: ComputedDatum<RawDatum>
+    }
 
 export type SunburstLabelProps<RawDatum> = {
     label: CommonProps<RawDatum>['sliceLabel']
diff --git a/packages/sunburst/stories/sunburst.stories.tsx b/packages/sunburst/stories/sunburst.stories.tsx
index c378faf0e9..3428c08c00 100644
--- a/packages/sunburst/stories/sunburst.stories.tsx
+++ b/packages/sunburst/stories/sunburst.stories.tsx
@@ -4,8 +4,8 @@ import { action } from '@storybook/addon-actions'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 import { generateLibTree } from '@nivo/generators'
 // @ts-ignore
-import { linearGradientDef, patternDotsDef } from '@nivo/core'
-import { Sunburst } from '../src'
+import { linearGradientDef, patternDotsDef, useTheme } from '@nivo/core'
+import { Sunburst, NormalizedDatum } from '../src'
 
 const commonProperties = {
     width: 900,
@@ -43,22 +43,23 @@ stories.add('with custom colors', () => (
 ))
 
 stories.add('with formatted tooltip value', () => (
-    <Sunburst
-        {...commonProperties}
-        tooltipFormat={value => {
-            return `~${typeof value === 'number' ? Math.floor(value) : value}%`
-        }}
-    />
+    <Sunburst {...commonProperties} valueFormat=" >-$,.2f" />
 ))
 
+const CustomTooltip = ({ id, value, color }: NormalizedDatum<unknown>) => {
+    const theme = useTheme()
+
+    return (
+        <strong style={{ ...theme.tooltip.container, color }}>
+            {id}: {value}
+        </strong>
+    )
+}
+
 stories.add('custom tooltip', () => (
     <Sunburst
         {...commonProperties}
-        tooltip={({ id, value, color }) => (
-            <strong style={{ color }}>
-                {id}: {value}
-            </strong>
-        )}
+        tooltip={CustomTooltip}
         theme={{
             tooltip: {
                 container: {