diff --git a/packages/swarmplot/src/SwarmPlot.tsx b/packages/swarmplot/src/SwarmPlot.tsx
index 0694551333..c357e92a9c 100644
--- a/packages/swarmplot/src/SwarmPlot.tsx
+++ b/packages/swarmplot/src/SwarmPlot.tsx
@@ -10,6 +10,7 @@ import { useSwarmPlot, useSwarmPlotLayerContext, useNodeMouseHandlers } from './
 import { Circles } from './Circles'
 import { CircleSvg } from './CircleSvg'
 import { SwarmPlotAnnotations } from './SwarmPlotAnnotations'
+import { SwarmPlotLegends } from './SwarmPlotLegends'
 
 type InnerSwarmPlotProps<RawDatum> = Partial<
     Omit<
@@ -52,6 +53,8 @@ const InnerSwarmPlot = <RawDatum,>({
     axisRight = defaultProps.axisRight,
     axisBottom = defaultProps.axisBottom,
     axisLeft = defaultProps.axisLeft,
+    legendLabel,
+    legends = defaultProps.legends,
     isInteractive,
     onMouseEnter,
     onMouseMove,
@@ -67,7 +70,7 @@ const InnerSwarmPlot = <RawDatum,>({
         partialMargin
     )
 
-    const { nodes, ...props } = useSwarmPlot<RawDatum>({
+    const { nodes, legendsData, ...props } = useSwarmPlot<RawDatum>({
         width: innerWidth,
         height: innerHeight,
         data,
@@ -85,6 +88,8 @@ const InnerSwarmPlot = <RawDatum,>({
         colorBy,
         forceStrength,
         simulationIterations,
+        legendLabel,
+        legends,
     })
 
     const xScale = props.xScale as Exclude<typeof props.xScale, ComputedDatum<RawDatum>[]>
@@ -105,6 +110,7 @@ const InnerSwarmPlot = <RawDatum,>({
         circles: null,
         annotations: null,
         mesh: null,
+        legends: null,
     }
 
     if (layers.includes('grid')) {
@@ -165,6 +171,17 @@ const InnerSwarmPlot = <RawDatum,>({
         )
     }
 
+    if (layers.includes('legends')) {
+        layerById.legends = (
+            <SwarmPlotLegends
+                key="legends"
+                width={innerWidth}
+                height={innerHeight}
+                legends={legendsData}
+            />
+        )
+    }
+
     if (isInteractive && useMesh) {
         layerById.mesh = (
             <Mesh
diff --git a/packages/swarmplot/src/SwarmPlotCanvas.tsx b/packages/swarmplot/src/SwarmPlotCanvas.tsx
index 9af72e1ce5..df7e79abfe 100644
--- a/packages/swarmplot/src/SwarmPlotCanvas.tsx
+++ b/packages/swarmplot/src/SwarmPlotCanvas.tsx
@@ -1,4 +1,4 @@
-import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as React from 'react'
 import isNumber from 'lodash/isNumber'
 import { Container, getRelativeCursor, isCursorInRect, useDimensions, useTheme } from '@nivo/core'
@@ -10,6 +10,7 @@ import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from
 import { ComputedDatum, SwarmPlotCanvasProps } from './types'
 import { defaultProps } from './props'
 import { useSwarmPlot } from './hooks'
+import { renderLegendToCanvas } from '@nivo/legends'
 
 export const renderCircleDefault = <RawDatum,>(
     ctx: CanvasRenderingContext2D,
@@ -78,6 +79,8 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
     axisRight = defaultProps.axisRight,
     axisBottom = defaultProps.axisBottom,
     axisLeft = defaultProps.axisLeft,
+    legendLabel,
+    legends = defaultProps.legends,
     isInteractive,
     onMouseMove,
     onClick,
@@ -95,7 +98,7 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
         partialMargin
     )
 
-    const { nodes, ...scales } = useSwarmPlot<RawDatum>({
+    const { nodes, legendsData, ...scales } = useSwarmPlot<RawDatum>({
         width: innerWidth,
         height: innerHeight,
         data,
@@ -113,6 +116,8 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
         colorBy,
         forceStrength,
         simulationIterations,
+        legendLabel,
+        legends,
     })
 
     const { xScale, yScale } = scales as Record<'xScale' | 'yScale', AnyScale>
@@ -125,7 +130,8 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
     })
 
     const getBorderColor = useInheritedColor(borderColor, theme)
-    const getBorderWidth = () => 1
+    // memoize getBorderWidth to provide a stable object for the rendering
+    const getBorderWidth = useMemo(() => () => 1, [])
 
     useEffect(() => {
         if (!canvasEl.current) return
@@ -203,6 +209,18 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
                     renderVoronoiCellToCanvas(ctx, voronoi, currentNode.index)
                 }
             }
+
+            if (layer === 'legends') {
+                legendsData.forEach(([legend, data]) => {
+                    renderLegendToCanvas(ctx, {
+                        ...legend,
+                        data,
+                        containerWidth: innerWidth,
+                        containerHeight: innerHeight,
+                        theme,
+                    })
+                })
+            }
         })
     }, [
         canvasEl,
@@ -231,6 +249,7 @@ export const InnerSwarmPlotCanvas = <RawDatum,>({
         renderCircle,
         getBorderWidth,
         getBorderColor,
+        legendsData,
     ])
 
     const getNodeFromMouseEvent = useCallback(
diff --git a/packages/swarmplot/src/SwarmPlotLegends.tsx b/packages/swarmplot/src/SwarmPlotLegends.tsx
new file mode 100644
index 0000000000..fdfdf1dd56
--- /dev/null
+++ b/packages/swarmplot/src/SwarmPlotLegends.tsx
@@ -0,0 +1,23 @@
+import { BoxLegendSvg } from '@nivo/legends'
+import { LegendProps } from '@nivo/legends'
+import { SwarmPlotLegendData } from './types'
+
+interface SwarmPlotLegendsProps {
+    width: number
+    height: number
+    legends: [LegendProps, SwarmPlotLegendData[]][]
+}
+
+export const SwarmPlotLegends = ({ width, height, legends }: SwarmPlotLegendsProps) => (
+    <>
+        {legends.map(([legend, data], i) => (
+            <BoxLegendSvg
+                key={i}
+                {...legend}
+                containerWidth={width}
+                containerHeight={height}
+                data={data}
+            />
+        ))}
+    </>
+)
diff --git a/packages/swarmplot/src/compute.ts b/packages/swarmplot/src/compute.ts
index 393991af9e..7402cccb9b 100644
--- a/packages/swarmplot/src/compute.ts
+++ b/packages/swarmplot/src/compute.ts
@@ -1,21 +1,22 @@
 import isNumber from 'lodash/isNumber'
 import isPlainObject from 'lodash/isPlainObject'
 import isString from 'lodash/isString'
+import uniqBy from 'lodash/uniqBy'
 import get from 'lodash/get'
 import { scaleLinear, ScaleOrdinal, scaleOrdinal } from 'd3-scale'
 import { forceSimulation, forceX, forceY, forceCollide, ForceX, ForceY } from 'd3-force'
+import { computeScale, createDateNormalizer, generateSeriesAxis } from '@nivo/scales'
 import {
-    computeScale,
-    createDateNormalizer,
-    generateSeriesAxis,
-    ScaleLinear,
-    ScaleLinearSpec,
-    ScaleTime,
-    ScaleTimeSpec,
-} from '@nivo/scales'
-import { ComputedDatum, PreSimulationDatum, SizeSpec, SimulationForces } from './types'
-
-const getParsedValue = (scaleSpec: ScaleLinearSpec | ScaleTimeSpec) => {
+    ComputedDatum,
+    PreSimulationDatum,
+    SizeSpec,
+    SimulationForces,
+    SwarmPlotLegendData,
+    SwarmPlotValueScaleSpec,
+    SwarmPlotValueScale,
+} from './types'
+
+const getParsedValue = (scaleSpec: SwarmPlotValueScaleSpec) => {
     if (scaleSpec.type === 'time' && scaleSpec.format !== 'native') {
         return createDateNormalizer(scaleSpec) as <T>(value: T) => T
     }
@@ -66,9 +67,9 @@ export const computeValueScale = <RawDatum>({
     height: number
     axis: 'x' | 'y'
     getValue: (datum: RawDatum) => number | Date
-    scale: ScaleLinearSpec | ScaleTimeSpec
+    scale: SwarmPlotValueScaleSpec
     data: RawDatum[]
-}) => {
+}): SwarmPlotValueScale => {
     const values = data.map(getValue)
 
     if (scale.type === 'time') {
@@ -77,9 +78,7 @@ export const computeValueScale = <RawDatum>({
         ]
         const axes = generateSeriesAxis(series, axis, scale)
 
-        return computeScale(scale, axes, axis === 'x' ? width : height, axis) as ScaleTime<
-            Date | string
-        >
+        return computeScale(scale, axes, axis === 'x' ? width : height, axis) as SwarmPlotValueScale
     }
 
     const min = Math.min(...(values as number[]))
@@ -90,7 +89,7 @@ export const computeValueScale = <RawDatum>({
         { all: values, min, max },
         axis === 'x' ? width : height,
         axis
-    ) as ScaleLinear<number>
+    ) as SwarmPlotValueScale
 }
 
 export const getSizeGenerator = <RawDatum>(size: SizeSpec<RawDatum>) => {
@@ -140,7 +139,7 @@ export const computeForces = <RawDatum>({
     forceStrength,
 }: {
     axis: 'x' | 'y'
-    valueScale: ScaleLinear<number> | ScaleTime<string | Date>
+    valueScale: SwarmPlotValueScale
     ordinalScale: ScaleOrdinal<string, number>
     spacing: number
     forceStrength: number
@@ -183,13 +182,13 @@ export const computeNodes = <RawDatum>({
     getId: (datum: RawDatum) => string
     layout: 'vertical' | 'horizontal'
     getValue: (datum: RawDatum) => number | Date
-    valueScale: ScaleLinear<number> | ScaleTime<string | Date>
+    valueScale: SwarmPlotValueScale
     getGroup: (datum: RawDatum) => string
     ordinalScale: ScaleOrdinal<string, number>
     getSize: (datum: RawDatum) => number
     forces: SimulationForces<RawDatum>
     simulationIterations: number
-    valueScaleConfig: ScaleLinearSpec | ScaleTimeSpec
+    valueScaleConfig: SwarmPlotValueScaleSpec
 }) => {
     const config = {
         horizontal: ['x', 'y'],
@@ -220,3 +219,21 @@ export const computeNodes = <RawDatum>({
         nodes: simulation.nodes() as ComputedDatum<RawDatum>[],
     }
 }
+
+export const getBaseLegendData = <RawDatum>({
+    nodes,
+    getLegendLabel,
+}: {
+    nodes: ComputedDatum<RawDatum>[]
+    getLegendLabel: (datum: RawDatum) => string
+}) => {
+    const nodeData = nodes.map(
+        node =>
+            ({
+                id: node.group,
+                label: getLegendLabel(node.data),
+                color: node?.color,
+            } as SwarmPlotLegendData)
+    )
+    return uniqBy(nodeData, ({ id }) => id)
+}
diff --git a/packages/swarmplot/src/hooks.ts b/packages/swarmplot/src/hooks.ts
index 4d33692d38..5d076bc33d 100644
--- a/packages/swarmplot/src/hooks.ts
+++ b/packages/swarmplot/src/hooks.ts
@@ -4,21 +4,25 @@ import { usePropertyAccessor, useValueFormatter } from '@nivo/core'
 import { useOrdinalColorScale } from '@nivo/colors'
 import { AnnotationMatcher, useAnnotations } from '@nivo/annotations'
 import { useTooltip } from '@nivo/tooltip'
-import { ScaleLinear, ScaleLinearSpec, ScaleTime, ScaleTimeSpec } from '@nivo/scales'
 import {
     computeValueScale,
     computeOrdinalScale,
     getSizeGenerator,
+    getBaseLegendData,
     computeForces,
     computeNodes,
 } from './compute'
 import {
     SwarmPlotCommonProps,
+    SwarmPlotLegendData,
     ComputedDatum,
     SizeSpec,
     SwarmPlotCustomLayerProps,
     MouseHandlers,
+    SwarmPlotValueScale,
+    SwarmPlotValueScaleSpec,
 } from './types'
+import { LegendProps } from '@nivo/legends'
 
 export const useValueScale = <RawDatum>({
     width,
@@ -32,7 +36,7 @@ export const useValueScale = <RawDatum>({
     height: number
     axis: 'x' | 'y'
     getValue: (datum: RawDatum) => number | Date
-    scale: ScaleLinearSpec | ScaleTimeSpec
+    scale: SwarmPlotValueScaleSpec
     data: RawDatum[]
 }) =>
     useMemo(
@@ -77,7 +81,7 @@ export const useForces = <RawDatum>({
     forceStrength,
 }: {
     axis: 'x' | 'y'
-    valueScale: ScaleLinear<number> | ScaleTime<string | Date>
+    valueScale: SwarmPlotValueScale
     ordinalScale: ScaleOrdinal<string, number>
     spacing: number
     forceStrength: number
@@ -112,6 +116,8 @@ export const useSwarmPlot = <RawDatum>({
     simulationIterations,
     colors,
     colorBy,
+    legendLabel,
+    legends,
 }: {
     data: RawDatum[]
     width: number
@@ -130,6 +136,8 @@ export const useSwarmPlot = <RawDatum>({
     simulationIterations: SwarmPlotCommonProps<RawDatum>['simulationIterations']
     colors: SwarmPlotCommonProps<RawDatum>['colors']
     colorBy: SwarmPlotCommonProps<RawDatum>['colorBy']
+    legendLabel: SwarmPlotCommonProps<RawDatum>['legendLabel']
+    legends: SwarmPlotCommonProps<RawDatum>['legends']
 }) => {
     const axis = layout === 'horizontal' ? 'x' : 'y'
 
@@ -143,6 +151,7 @@ export const useSwarmPlot = <RawDatum>({
         colors,
         getColorId
     )
+    const getLegendLabel = usePropertyAccessor<RawDatum, string>(legendLabel ?? groupBy)
 
     const valueScale = useValueScale({
         width,
@@ -209,11 +218,25 @@ export const useSwarmPlot = <RawDatum>({
         [nodes, formatValue, getColor]
     )
 
+    const legendsData: [LegendProps, SwarmPlotLegendData[]][] = useMemo(
+        () =>
+            legends.map(legend => {
+                if (legend.data) return [legend, legend.data as SwarmPlotLegendData[]]
+                const data = getBaseLegendData({
+                    nodes: augmentedNodes,
+                    getLegendLabel,
+                })
+                return [legend, data]
+            }),
+        [legends, augmentedNodes, getLegendLabel]
+    )
+
     return {
         nodes: augmentedNodes,
         xScale,
         yScale,
         getColor,
+        legendsData,
     }
 }
 
@@ -306,10 +329,7 @@ export const useSwarmPlotAnnotations = <RawDatum>(
 
 export const useSwarmPlotLayerContext = <
     RawDatum,
-    Scale extends
-        | ScaleLinear<number>
-        | ScaleTime<string | Date>
-        | ScaleOrdinal<string, number, never>
+    Scale extends SwarmPlotValueScale | ScaleOrdinal<string, number, never>
 >({
     nodes,
     xScale,
diff --git a/packages/swarmplot/src/props.ts b/packages/swarmplot/src/props.ts
index ed6b1da6e0..d3c166d3af 100644
--- a/packages/swarmplot/src/props.ts
+++ b/packages/swarmplot/src/props.ts
@@ -17,13 +17,14 @@ export const defaultProps = {
     colorBy: 'group',
     borderWidth: 0,
     borderColor: 'rgba(0, 0, 0, 0)',
-    layers: ['grid', 'axes', 'circles', 'annotations', 'mesh'] as SwarmPlotLayerId[],
+    layers: ['grid', 'axes', 'circles', 'annotations', 'mesh', 'legends'] as SwarmPlotLayerId[],
     enableGridX: true,
     enableGridY: true,
     axisTop: {},
     axisRight: {},
     axisBottom: {},
     axisLeft: {},
+    legends: [],
     isInteractive: true,
     useMesh: false,
     debugMesh: false,
diff --git a/packages/swarmplot/src/types.ts b/packages/swarmplot/src/types.ts
index 0b4521a830..b7dc95bafe 100644
--- a/packages/swarmplot/src/types.ts
+++ b/packages/swarmplot/src/types.ts
@@ -4,9 +4,18 @@ import { ForceX, ForceY, ForceCollide } from 'd3-force'
 import { PropertyAccessor, ValueFormat, Theme, ModernMotionProps, Box, Margin } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { AxisProps, CanvasAxisProps } from '@nivo/axes'
-import { ScaleLinear, ScaleLinearSpec, ScaleTime, ScaleTimeSpec, TicksSpec } from '@nivo/scales'
+import {
+    ScaleLinear,
+    ScaleLinearSpec,
+    ScaleLog,
+    ScaleLogSpec,
+    ScaleTime,
+    ScaleTimeSpec,
+    TicksSpec,
+} from '@nivo/scales'
 import { AnnotationMatcher } from '@nivo/annotations'
 import { ScaleOrdinal } from 'd3-scale'
+import { LegendProps } from '@nivo/legends'
 
 export interface ComputedDatum<RawDatum> {
     id: string
@@ -33,14 +42,11 @@ export type SimulationForces<RawDatum> = {
     collision: ForceCollide<PreSimulationDatum<RawDatum>>
 }
 
-export type SwarmPlotLayerId = 'grid' | 'axes' | 'circles' | 'annotations' | 'mesh'
+export type SwarmPlotLayerId = 'grid' | 'axes' | 'circles' | 'annotations' | 'mesh' | 'legends'
 
 export interface SwarmPlotCustomLayerProps<
     RawDatum,
-    Scale extends
-        | ScaleLinear<number>
-        | ScaleTime<string | Date>
-        | ScaleOrdinal<string, number> = ScaleLinear<number>
+    Scale extends SwarmPlotValueScale | ScaleOrdinal<string, number>
 > {
     nodes: ComputedDatum<RawDatum>[]
     xScale: Scale
@@ -54,18 +60,12 @@ export interface SwarmPlotCustomLayerProps<
 
 export type SwarmPlotCustomLayer<
     RawDatum,
-    Scale extends
-        | ScaleLinear<number>
-        | ScaleTime<string | Date>
-        | ScaleOrdinal<string, number> = ScaleLinear<number>
+    Scale extends SwarmPlotValueScale | ScaleOrdinal<string, number>
 > = React.FC<SwarmPlotCustomLayerProps<RawDatum, Scale>>
 
 export type SwarmPlotLayer<
     RawDatum,
-    Scale extends
-        | ScaleLinear<number>
-        | ScaleTime<string | Date>
-        | ScaleOrdinal<string, number> = ScaleLinear<number>
+    Scale extends SwarmPlotValueScale | ScaleOrdinal<string, number>
 > = SwarmPlotLayerId | SwarmPlotCustomLayer<RawDatum, Scale>
 
 export type SizeSpec<RawDatum> =
@@ -91,6 +91,17 @@ export type MouseHandlers<RawDatum> = {
     onMouseLeave?: MouseHandler<RawDatum>
 }
 
+// replace in future by a type from @nivo/legends
+export type SwarmPlotLegendData = {
+    id: string | number
+    label: string | number
+    color: string
+}
+
+export type SwarmPlotValueScaleSpec = ScaleLinearSpec | ScaleTimeSpec | ScaleLogSpec
+
+export type SwarmPlotValueScale = ScaleLinear<number> | ScaleTime<Date | string> | ScaleLog
+
 export type SwarmPlotCommonProps<RawDatum> = {
     data: RawDatum[]
     width: number
@@ -99,7 +110,7 @@ export type SwarmPlotCommonProps<RawDatum> = {
     groups: string[]
     id: PropertyAccessor<RawDatum, string>
     value: PropertyAccessor<RawDatum, number | Date>
-    valueScale: ScaleLinearSpec | ScaleTimeSpec
+    valueScale: SwarmPlotValueScaleSpec
     valueFormat: ValueFormat<number | Date>
     groupBy: PropertyAccessor<RawDatum, string>
     size: SizeSpec<RawDatum>
@@ -122,10 +133,9 @@ export type SwarmPlotCommonProps<RawDatum> = {
     debugMesh: boolean
     tooltip: (props: ComputedDatum<RawDatum>) => JSX.Element
     annotations: AnnotationMatcher<ComputedDatum<RawDatum>>[]
-    layers: SwarmPlotLayer<
-        RawDatum,
-        ScaleLinear<number> | ScaleTime<string | Date> | ScaleOrdinal<string, number>
-    >[]
+    layers: SwarmPlotLayer<RawDatum, SwarmPlotValueScale | ScaleOrdinal<string, number>>[]
+    legendLabel?: PropertyAccessor<RawDatum, string>
+    legends: LegendProps[]
     animate: boolean
     motionConfig: ModernMotionProps['motionConfig']
     role: string
diff --git a/packages/swarmplot/stories/SwarmPlot.stories.tsx b/packages/swarmplot/stories/SwarmPlot.stories.tsx
index 192d95c64e..14d91ddbce 100644
--- a/packages/swarmplot/stories/SwarmPlot.stories.tsx
+++ b/packages/swarmplot/stories/SwarmPlot.stories.tsx
@@ -133,3 +133,77 @@ stories.add('using time scale', () => (
         layout="horizontal"
     />
 ))
+
+stories.add('using log scale', () => {
+    // ensure that dataset has price as a non-negative value
+    const data = commonProps.data.map(datum => ({
+        ...datum,
+        price: Math.max(1, datum.price),
+    }))
+    const customLegendLabels: { [key: string]: string } = {
+        'group A': 'A',
+        'group B': 'B',
+        'group C': 'C',
+    }
+    return (
+        <SwarmPlot
+            {...commonProps}
+            data={data}
+            margin={{ top: 60, right: 40, bottom: 100, left: 100 }}
+            value="price"
+            valueScale={{
+                type: 'log' as const,
+            }}
+            size={8}
+            axisBottom={null}
+            axisRight={null}
+            axisTop={{
+                tickSize: 10,
+                tickValues: [1, 10, 100, 1000],
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: 'price',
+                legendPosition: 'middle',
+                legendOffset: -46,
+            }}
+            axisLeft={{
+                tickSize: 10,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: '',
+                legendPosition: 'middle',
+                legendOffset: -76,
+            }}
+            layout="horizontal"
+            legendLabel={datum => customLegendLabels[datum.group as string]}
+            legends={[
+                {
+                    anchor: 'bottom-left',
+                    direction: 'row',
+                    itemHeight: 20,
+                    itemWidth: 60,
+                    translateY: 50,
+                },
+                {
+                    anchor: 'bottom-right',
+                    direction: 'row',
+                    itemHeight: 20,
+                    itemWidth: 80,
+                    translateY: 50,
+                    data: [
+                        {
+                            id: 'A',
+                            label: 'custom',
+                            color: '#000000',
+                        },
+                        {
+                            id: 'B',
+                            label: 'legends',
+                            color: '#888888',
+                        },
+                    ],
+                },
+            ]}
+        />
+    )
+})
diff --git a/packages/swarmplot/stories/SwarmPlotCanvas.stories.tsx b/packages/swarmplot/stories/SwarmPlotCanvas.stories.tsx
index b72cea30e8..4384a45290 100644
--- a/packages/swarmplot/stories/SwarmPlotCanvas.stories.tsx
+++ b/packages/swarmplot/stories/SwarmPlotCanvas.stories.tsx
@@ -61,3 +61,58 @@ stories.add('using annotations', () => (
         ]}
     />
 ))
+
+stories.add('using log scale', () => {
+    // ensure that dataset has price as a non-negative value
+    const data = commonProps.data
+        .map(datum => ({
+            ...datum,
+            price: Math.max(1, datum.price),
+        }))
+        .filter(datum => datum.group != 'group G')
+    return (
+        <SwarmPlotCanvas
+            {...commonProps}
+            margin={{ top: 40, right: 120, bottom: 60, left: 100 }}
+            data={data}
+            groups={['group A', 'group B', 'group C', 'group D', 'group E', 'group F']}
+            value="price"
+            valueScale={{
+                type: 'log' as const,
+            }}
+            size={7}
+            borderWidth={0.5}
+            borderColor={'#222222'}
+            enableGridY={true}
+            axisTop={null}
+            axisRight={null}
+            axisLeft={{
+                tickSize: 5,
+                tickValues: [1, 10, 100, 1000],
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: 'price',
+                legendPosition: 'middle',
+                legendOffset: -50,
+            }}
+            axisBottom={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: '',
+                legendPosition: 'middle',
+                legendOffset: 40,
+            }}
+            legends={[
+                {
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    itemHeight: 20,
+                    itemWidth: 80,
+                    translateY: 0,
+                    translateX: 100,
+                },
+            ]}
+        />
+    )
+})