layerchart 0.54.0 → 0.54.1

package/dist/components/charts/BarChart.svelte

@@ -1,118 +1,178 @@
-<script generics="TData">import {} from 'svelte';
-import { scaleBand, scaleOrdinal, scaleLinear } from 'd3-scale';
-import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-import { sum } from 'd3-array';
-import { format } from '@layerstack/utils';
-import Axis from '../Axis.svelte';
-import Bars from '../Bars.svelte';
-import Chart from '../Chart.svelte';
-import Grid from '../Grid.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-import Legend from '../Legend.svelte';
-import Rule from '../Rule.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-export let x = undefined;
-export let y = undefined;
-export let orientation = 'vertical';
-$: isVertical = orientation === 'vertical';
-export let series = [
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleBand, scaleOrdinal, scaleLinear } from 'd3-scale';
+  import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Bars from '../Bars.svelte';
+  import Chart from '../Chart.svelte';
+  import Grid from '../Grid.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Legend from '../Legend.svelte';
+  import Rule from '../Rule.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    axis?: typeof axis;
+    grid?: typeof grid;
+    bandPadding?: typeof bandPadding;
+    groupPadding?: typeof groupPadding;
+    labels?: typeof labels;
+    legend?: typeof legend;
+    orientation?: typeof orientation;
+    props?: typeof props;
+    rule?: typeof rule;
+    series?: typeof series;
+    seriesLayout?: typeof seriesLayout;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  export let orientation: 'vertical' | 'horizontal' = 'vertical';
+  $: isVertical = orientation === 'vertical';
+
+  export let series: {
+    key: string;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Bars>>;
+  }[] = [
     {
-        key: 'default',
-        value: orientation === 'vertical' ? y : x,
+      key: 'default',
+      value: orientation === 'vertical' ? y : x,
     },
-];
-$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
-/** Determine how to layout series.  Overlap (default), stack, or group side by side */
-export let seriesLayout = 'overlap';
-$: stackSeries = seriesLayout.startsWith('stack');
-$: groupSeries = seriesLayout === 'group';
-export let axis = true;
-export let rule = true;
-export let grid = true;
-export let labels = false;
-export let legend = false;
-/** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
-export let bandPadding = 0.4;
-/** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
-export let groupPadding = 0;
-$: xScale = isVertical ? scaleBand().padding(bandPadding) : scaleLinear();
-$: xBaseline = isVertical ? undefined : 0;
-$: yScale = isVertical ? scaleLinear() : scaleBand().padding(bandPadding);
-$: yBaseline = isVertical ? 0 : undefined;
-let x1Scale;
-let x1Domain;
-let x1Range;
-let y1Scale;
-let y1Domain;
-let y1Range;
-$: if (seriesLayout === 'group') {
+  ];
+  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
+
+  /** Determine how to layout series.  Overlap (default), stack, or group side by side */
+  export let seriesLayout: 'overlap' | 'group' | 'stack' | 'stackExpand' | 'stackDiverging' =
+    'overlap';
+  $: stackSeries = seriesLayout.startsWith('stack');
+  $: groupSeries = seriesLayout === 'group';
+
+  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let rule: ComponentProps<Rule> | boolean = true;
+  export let grid: ComponentProps<Grid> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let legend: ComponentProps<Legend> | boolean = false;
+
+  /** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
+  export let bandPadding = 0.4;
+  /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
+  export let groupPadding = 0;
+
+  $: xScale = isVertical ? scaleBand().padding(bandPadding) : scaleLinear();
+  $: xBaseline = isVertical ? undefined : 0;
+
+  $: yScale = isVertical ? scaleLinear() : scaleBand().padding(bandPadding);
+  $: yBaseline = isVertical ? 0 : undefined;
+
+  let x1Scale: ChartProps['x1Scale'];
+  let x1Domain: ChartProps['x1Domain'];
+  let x1Range: ChartProps['x1Range'];
+
+  let y1Scale: ChartProps['y1Scale'];
+  let y1Domain: ChartProps['y1Domain'];
+  let y1Range: ChartProps['y1Range'];
+
+  $: if (seriesLayout === 'group') {
     if (isVertical) {
-        x1Scale = scaleBand().padding(groupPadding);
-        x1Domain = series.map((s) => s.key);
-        x1Range = ({ xScale }) => [0, xScale.bandwidth?.()];
-    }
-    else {
-        y1Scale = scaleBand().padding(groupPadding);
-        y1Domain = series.map((s) => s.key);
-        y1Range = ({ yScale }) => [0, yScale.bandwidth?.()];
+      x1Scale = scaleBand().padding(groupPadding);
+      x1Domain = series.map((s) => s.key);
+      x1Range = ({ xScale }) => [0, xScale.bandwidth?.()];
+    } else {
+      y1Scale = scaleBand().padding(groupPadding);
+      y1Domain = series.map((s) => s.key);
+      y1Range = ({ yScale }) => [0, yScale.bandwidth?.()];
     }
-}
-export let props = {};
-$: allSeriesData = series
-    .flatMap((s) => s.data?.map((d) => {
-    return { seriesKey: s.key, ...d };
-}))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-$: if (stackSeries) {
+  }
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    grid?: Partial<ComponentProps<Grid>>;
+    rule?: Partial<ComponentProps<Rule>>;
+    bars?: Partial<ComponentProps<Bars>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+  } = {};
+
+  $: allSeriesData = series
+    .flatMap((s) =>
+      s.data?.map((d) => {
+        return { seriesKey: s.key, ...d };
+      })
+    )
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  $: if (stackSeries) {
     const seriesKeys = series.map((s) => s.key);
     // const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
-    const offset = seriesLayout === 'stackExpand'
+
+    const offset =
+      seriesLayout === 'stackExpand'
         ? stackOffsetExpand
         : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
+          ? stackOffsetDiverging
+          : stackOffsetNone;
     const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-        const s = series.find((d) => d.key === key);
-        return accessor(s.value ?? s.key)(d);
-    })
-        .offset(offset)(chartDataArray(data));
+      .keys(seriesKeys)
+      .value((d, key) => {
+        const s = series.find((d) => d.key === key)!;
+        return accessor(s.value ?? s.key)(d as any);
+      })
+      .offset(offset)(chartDataArray(data)) as any[];
+
     chartData = chartData.map((d, i) => {
-        return {
-            ...d,
-            stackData: stackData.map((sd) => sd[i]),
-        };
+      return {
+        ...d,
+        stackData: stackData.map((sd) => sd[i]),
+      };
     });
-}
-function getBarsProps(s, i) {
-    const barsProps = {
-        data: s.data,
-        x: !isVertical
-            ? stackSeries
-                ? (d) => d.stackData[i]
-                : (s.value ?? (s.data ? undefined : s.key))
-            : undefined,
-        y: isVertical
-            ? stackSeries
-                ? (d) => d.stackData[i]
-                : (s.value ?? (s.data ? undefined : s.key))
-            : undefined,
-        x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
-        y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
-        radius: 4,
-        strokeWidth: 1,
-        fill: s.color,
-        ...props.bars,
-        ...s.props,
+  }
+
+  function getBarsProps(s: (typeof series)[number], i: number) {
+    const barsProps: ComponentProps<Bars> = {
+      data: s.data,
+      x: !isVertical
+        ? stackSeries
+          ? (d) => d.stackData[i]
+          : (s.value ?? (s.data ? undefined : s.key))
+        : undefined,
+      y: isVertical
+        ? stackSeries
+          ? (d) => d.stackData[i]
+          : (s.value ?? (s.data ? undefined : s.key))
+        : undefined,
+      x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
+      y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
+      radius: 4,
+      strokeWidth: 1,
+      fill: s.color,
+      ...props.bars,
+      ...s.props,
     };
+
     return barsProps;
-}
+  }
 </script>
 
 <Chart
@@ -218,7 +278,12 @@ function getBarsProps(s, i) {
           {/if}
 
           {#if rule}
-            <Rule x={0} y={0} {...typeof rule === 'object' ? rule : null} {...props.rule} />
+            <Rule
+              x={isVertical ? false : 0}
+              y={isVertical ? 0 : false}
+              {...typeof rule === 'object' ? rule : null}
+              {...props.rule}
+            />
           {/if}
         {/if}
       </slot>
@@ -270,7 +335,7 @@ function getBarsProps(s, i) {
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
               value={valueAccessor(data)}
-              color={s.color ?? cScale(c(data))}
+              color={s.color ?? cScale?.(c(data))}
               {format}
               valueAlign="right"
             />

package/dist/components/charts/BarChart.svelte.d.ts

@@ -254,7 +254,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {

package/dist/components/charts/LineChart.svelte

@@ -1,49 +1,93 @@
-<script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
-import { format } from '@layerstack/utils';
-import Axis from '../Axis.svelte';
-import Chart from '../Chart.svelte';
-import Grid from '../Grid.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-import Legend from '../Legend.svelte';
-import Points from '../Points.svelte';
-import Rule from '../Rule.svelte';
-import Spline from '../Spline.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-export let x = undefined;
-export let y = undefined;
-/** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
-export let series = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
-$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
-export let axis = true;
-export let rule = true;
-export let grid = true;
-export let labels = false;
-export let legend = false;
-export let points = false;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Grid from '../Grid.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Legend from '../Legend.svelte';
+  import Points from '../Points.svelte';
+  import Rule from '../Rule.svelte';
+  import Spline from '../Spline.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    axis?: typeof axis;
+    grid?: typeof grid;
+    labels?: typeof labels;
+    legend?: typeof legend;
+    points?: typeof points;
+    props?: typeof props;
+    rule?: typeof rule;
+    series?: typeof series;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Spline>>;
+  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
+
+  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let rule: ComponentProps<Rule> | boolean = true;
+  export let grid: ComponentProps<Grid> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let legend: ComponentProps<Legend> | boolean = false;
+  export let points: ComponentProps<Points> | boolean = false;
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    grid?: Partial<ComponentProps<Grid>>;
+    rule?: Partial<ComponentProps<Rule>>;
+    spline?: Partial<ComponentProps<Spline>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+    points?: Partial<ComponentProps<Points>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-// Default xScale based on first data's `x` value
-$: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
-function getSplineProps(s, i) {
-    const splineProps = {
-        data: s.data,
-        y: s.value ?? (s.data ? undefined : s.key),
-        class: 'stroke-2',
-        stroke: s.color,
-        ...props.spline,
-        ...s.props,
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+
+  function getSplineProps(s: (typeof series)[number], i: number) {
+    const splineProps: ComponentProps<Spline> = {
+      data: s.data,
+      y: s.value ?? (s.data ? undefined : s.key),
+      class: 'stroke-2',
+      stroke: s.color,
+      ...props.spline,
+      ...s.props,
     };
+
     return splineProps;
-}
+  }
 </script>
 
 <Chart

package/dist/components/charts/LineChart.svelte.d.ts

@@ -253,7 +253,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {

package/dist/components/charts/PieChart.svelte

@@ -1,52 +1,102 @@
-<script generics="TData">import {} from 'svelte';
-import { sum } from 'd3-array';
-import { format } from '@layerstack/utils';
-import Arc from '../Arc.svelte';
-import Chart from '../Chart.svelte';
-import Group from '../Group.svelte';
-import Legend from '../Legend.svelte';
-import Pie from '../Pie.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-/** Key accessor */
-export let key = 'key';
-$: keyAccessor = accessor(key);
-/** Label accessor */
-export let label = 'label';
-$: labelAccessor = accessor(label);
-/** Value accessor */
-export let value = 'value';
-$: valueAccessor = accessor(value);
-/** Maximum possible value, useful when `data` is single item */
-export let maxValue = undefined;
-export let series = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
-export let legend = false;
-/**
- * Range [min,max] in degrees.  See also startAngle/endAngle
- */
-export let range = [0, 360];
-/**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
- */
-export let innerRadius = undefined;
-/**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
- */
-export let outerRadius = undefined;
-export let cornerRadius = 0;
-export let padAngle = 0;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Arc from '../Arc.svelte';
+  import Chart from '../Chart.svelte';
+  import Group from '../Group.svelte';
+  import Legend from '../Legend.svelte';
+  import Pie from '../Pie.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    cornerRadius?: typeof cornerRadius;
+    innerRadius?: typeof innerRadius;
+    key?: typeof key;
+    label?: typeof label;
+    legend?: typeof legend;
+    maxValue?: typeof maxValue;
+    outerRadius?: typeof outerRadius;
+    padAngle?: typeof padAngle;
+    props?: typeof props;
+    range?: typeof range;
+    series?: typeof series;
+    value?: typeof label;
+  }
+
+  export let data: ChartProps['data'] = [];
+
+  /** Key accessor */
+  export let key: Accessor<TData> = 'key';
+  $: keyAccessor = accessor(key);
+
+  /** Label accessor */
+  export let label: Accessor<TData> = 'label';
+  $: labelAccessor = accessor(label);
+
+  /** Value accessor */
+  export let value: Accessor<TData> = 'value';
+  $: valueAccessor = accessor(value);
+
+  /** Maximum possible value, useful when `data` is single item */
+  export let maxValue: number | undefined = undefined;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    /** Maximum possible value, useful when `data` is single item */
+    maxValue?: number;
+    color?: string;
+    props?: Partial<ComponentProps<Arc>>;
+  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+
+  export let legend: ComponentProps<Legend> | boolean = false;
+
+  /**
+   * Range [min,max] in degrees.  See also startAngle/endAngle
+   */
+  export let range = [0, 360];
+
+  /**
+   * Define innerRadius.
+   *   value >= 1: discrete value
+   *   value >  0: percent of `outerRadius`
+   *   value <  0: offset of `outerRadius`
+   *   default: yRange min
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+
+  export let props: {
+    pie?: Partial<ComponentProps<Pie>>;
+    group?: Partial<ComponentProps<Group>>;
+    arc?: Partial<ComponentProps<Arc>>;
+    legend?: Partial<ComponentProps<Legend>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-$: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+    .filter((d) => d) as Array<TData>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<TData>;
+
+  $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
 </script>
 
 <Chart
@@ -110,8 +160,8 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                 outerRadius={(outerRadius ?? 0) < 0 ? i * (outerRadius ?? 0) : outerRadius}
                 {cornerRadius}
                 {padAngle}
-                fill={s.color ?? cScale(c(d))}
-                track={{ fill: s.color ?? cScale(c(d)), 'fill-opacity': 0.1 }}
+                fill={s.color ?? cScale?.(c(d))}
+                track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
                 {...props.arc}
@@ -136,7 +186,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                     {innerRadius}
                     {cornerRadius}
                     {padAngle}
-                    fill={cScale(c(arc.data))}
+                    fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
                     {...props.arc}
@@ -173,7 +223,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
           <Tooltip.Item
             label={labelAccessor(data) || keyAccessor(data)}
             value={valueAccessor(data)}
-            color={cScale(c(data))}
+            color={cScale?.(c(data))}
             {format}
           />
         </Tooltip.List>