@trackunit/react-chart-components 1.3.86 → 1.3.88

package/index.esm.js

@@ -1,61 +1,170 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Spinner, Text } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Spinner, Text, useHover } from '@trackunit/react-components';
-import EChart from 'echarts-for-react';
-import { useRef, useEffect } from 'react';
+import { objectKeys } from '@trackunit/shared-utils';
+import * as echarts from 'echarts';
+import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, DEFAULT_CHART_OTHER } from '@trackunit/ui-design-tokens';
 
+function isECElementEvent(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "type" in value &&
+        "componentType" in value &&
+        "componentSubType" in value &&
+        "componentIndex" in value &&
+        "seriesIndex" in value);
+}
 /**
- * The Chart component is a wrapper component for ECharts.
- *
- * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {ReactElement} Chart component
+ * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
-    const echartsRef = useRef(null);
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", dataTestId, }) => {
+    const containerRef = useRef(null);
+    const internalChartRef = useRef(undefined);
+    const isInitialRender = useRef(true);
+    const setupEventHandlers = useCallback((chart) => {
+        // Handle click events
+        if (onClick) {
+            chart.on("click", function (event) {
+                if (isECElementEvent(event)) {
+                    onClick(event);
+                }
+            });
+            const zr = chart.getZr();
+            zr.setCursorStyle("pointer");
+        }
+        // Handle other events
+        if (onEvents) {
+            Object.entries(onEvents).forEach(([eventName, handler]) => {
+                if (eventName !== "click" || !onClick) {
+                    // Don't double-register click if onClick is provided
+                    chart.on(eventName, function (event) {
+                        if (isECElementEvent(event)) {
+                            handler(event);
+                        }
+                    });
+                }
+            });
+        }
+    }, [onClick, onEvents]);
+    const initChart = useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Dispose existing instance if any
+        if (internalChartRef.current) {
+            internalChartRef.current.dispose();
+            internalChartRef.current = undefined;
+        }
+        // Create new chart instance
+        const newChart = echarts.init(container, undefined, {
+            renderer,
+            width: "auto",
+            height: "auto",
+        });
+        // Store reference and notify ready
+        internalChartRef.current = newChart;
+        if (onChartReady) {
+            onChartReady(newChart);
+        }
+    }, [renderer, onChartReady]);
+    // Initialize chart and handle cleanup
     useEffect(() => {
-        const instance = echartsRef.current?.getEchartsInstance();
-        if (instance) {
-            if (onClick) {
-                instance.on("click", onClick);
+        initChart();
+        isInitialRender.current = true;
+        const resizeObserver = new ResizeObserver(() => {
+            const chart = internalChartRef.current;
+            if (!chart) {
+                return;
             }
-            else {
-                instance.getZr().setCursorStyle("default");
+            if (!chart.isDisposed()) {
+                chart.resize();
             }
+        });
+        const container = containerRef.current;
+        if (container) {
+            resizeObserver.observe(container);
+        }
+        return () => {
+            resizeObserver.disconnect();
+            const chart = internalChartRef.current;
+            if (!chart) {
+                return;
+            }
+            if (!chart.isDisposed()) {
+                const zr = chart.getZr();
+                zr.setCursorStyle("default");
+                chart.dispose();
+                internalChartRef.current = undefined;
+            }
+        };
+    }, [initChart]);
+    // Setup event handlers
+    useEffect(() => {
+        const chart = internalChartRef.current;
+        if (chart && !chart.isDisposed()) {
+            // Setup handlers
+            setupEventHandlers(chart);
         }
         return () => {
-            if (instance && !instance.isDisposed()) {
-                instance.off("click", onClick);
+            if (chart && !chart.isDisposed()) {
+                // Clean up all event handlers
+                chart.off("click");
+                if (onEvents) {
+                    objectKeys(onEvents).forEach(eventName => {
+                        chart.off(eventName);
+                    });
+                }
             }
         };
-    }, [onClick, echartsRef]);
-    return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: onEvents, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
+    }, [onEvents, setupEventHandlers]);
+    // Handle options updates
+    useEffect(() => {
+        const chart = internalChartRef.current;
+        if (!chart) {
+            return;
+        }
+        if (!chart.isDisposed()) {
+            // Force notMerge on initial render, respect prop afterwards
+            chart.setOption(option, isInitialRender.current || notMerge);
+            isInitialRender.current = false;
+        }
+    }, [option, notMerge]);
+    return jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
+};
+const cvaEChart = cvaMerge(["w-full", "h-full"]);
+
+/**
+ * The Chart component is a wrapper component for ECharts.
+ * Handles events and click functionality.
+ */
+const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+    const containerStyle = {
+        height: style?.height ?? "300px",
+        width: style?.width ?? "100%",
+        ...style,
+    };
+    return (jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, dataTestId: `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options ?? unsafeOptions, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
-const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
-const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 const cvaLegendItem = cvaMerge([
-    "inline-flex",
+    "flex",
     "items-center",
     "transition-all",
     "ease-in-out",
     "duration-200",
-    "text-neutral-500",
-    "hover:text-neutral-700",
-    "text-sm",
-    "gap-2",
+    "text-secondary-600",
+    "hover:text-secondary-900",
 ], {
     variants: {
         selected: {
             false: "",
-            true: "font-medium text-black",
+            true: ["font-semibold", "text-secondary-900"],
         },
         disabled: {
             false: "",
-            true: "text-neutral-300",
+            true: ["text-secondary-400", "hover:text-secondary-400"],
         },
         isClickable: {
             false: "cursor-default",
@@ -68,11 +177,11 @@ const cvaLegendItem = cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
+const cvaLegendItemIndicator = cvaMerge(["w-3", "mr-1", "h-3", "rounded-[50%]", "flex-none"], {
     variants: {
         selected: {
             false: "",
-            true: "border border-black border-opacity-50",
+            true: "",
         },
     },
     defaultVariants: {
@@ -86,77 +195,232 @@ const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), label ? jsx("p", { children: label }) : null] }));
+    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), jsxs("p", { className: "text-xs", children: ["(", count || 0, ")"] })] }));
+};
+
+/**
+ * Re-ordered chart colors to ensure that adjacent colors are visually different.
+ *
+ * @returns {string[]} The reordered chart colors.
+ */
+const useChartColor = () => {
+    const chartColor = useCallback((index) => {
+        return DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length] ?? "#000000";
+    }, []);
+    const chartColorArray = useCallback((total) => {
+        return Array.from({ length: total }, (_, index) => chartColor(index));
+    }, [chartColor]);
+    const chartStatusColor = useCallback((status) => {
+        return CHART_STATUS_COLORS[status];
+    }, []);
+    return {
+        chartColor,
+        chartColorArray,
+        chartStatusColor,
+    };
+};
+
+/**
+ * Limits the data set to the given limit.
+ * If the data set is larger than the limit, the data set is limited to the limit and the rest of the data is added to the "Others" group.
+ *
+ * @param data - The data set to limit.
+ * @param limit - The limit to apply to the data set.
+ * @returns {object} The limited data set with and without the "others" category.
+ */
+const useLimitDataSet = (data, limit) => {
+    const limitedData = useMemo(() => {
+        const sortedData = data.sort((a, b) => (b.count ?? 0) - (a.count ?? 0));
+        if (sortedData.length > limit) {
+            const result = sortedData.slice(0, limit);
+            result.push({
+                id: "defaultOther",
+                name: "Others",
+                selected: false,
+                count: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.count ?? 0), 0),
+                color: DEFAULT_CHART_OTHER,
+                original: { defaultOther: true },
+            });
+            return result;
+        }
+        return sortedData;
+    }, [data, limit]);
+    const limitedDataWithoutOthers = useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
+    return { limitedData, limitedDataWithoutOthers };
 };
 
 /**
- * Create a PieChart with legends based on our current Chart component
+ * Create a DonutChart with legends based on our current Chart component
  *
- * @param {PieChartProps} props - The props for the Chart component
+ * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
-    const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;
-    const { hovering, onMouseEnter, onMouseLeave } = useHover({ debounced: true });
-    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data?.map(item => (jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: item.count !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected }, item.id))) })) }), jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsx(Chart, { dataTestId: "pie-chart", onClick: evt => {
-                        const clickedEntry = data?.find(x => x.id === evt.data.id);
-                        if (onClick && clickedEntry) {
-                            onClick(clickedEntry);
-                        }
-                    }, options: {
-                        legend: {
-                            show: false,
-                        },
-                        tooltip: {
-                            show: false,
+const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const totalCount = useMemo(() => data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
+    const [hoveringItem, setHoveringItem] = useState(null);
+    const currentCount = useMemo(() => hoveringItem?.count ?? totalCount, [hoveringItem, totalCount]);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
+    const { chartColor } = useChartColor();
+    const handleChartReady = useCallback((chart) => {
+        chartRef.current = chart;
+    }, []);
+    const handleChartClick = useCallback((evt) => {
+        if (onClick && data) {
+            const clickedEntry = data.find(x => {
+                if (!evt.data || typeof evt.data !== "object" || !("id" in evt.data)) {
+                    return false;
+                }
+                return x.id === evt.data.id;
+            });
+            if (clickedEntry) {
+                onClick(clickedEntry);
+            }
+        }
+    }, [onClick, data]);
+    const handleChartEvents = useMemo(() => ({
+        mouseover: (evt) => {
+            const hoveredItem = data?.[evt.dataIndex];
+            if (hoveredItem) {
+                setHoveringItem(hoveredItem);
+            }
+        },
+        mouseout: () => {
+            setHoveringItem(null);
+        },
+    }), [data, setHoveringItem]);
+    const handleLegendMouseEnter = useCallback((item) => {
+        setHoveringItem(item);
+        const chart = chartRef.current;
+        if (!chart) {
+            return;
+        }
+        // Find the index in the current chart data
+        const index = (showOthers ? limitedData : limitedDataWithoutOthers).findIndex(d => d.id === item.id);
+        if (index !== -1) {
+            chart.dispatchAction({
+                type: "highlight",
+                seriesIndex: 0,
+                dataIndex: index,
+            });
+        }
+    }, [limitedData, limitedDataWithoutOthers, showOthers]);
+    const handleLegendMouseLeave = useCallback(() => {
+        setHoveringItem(null);
+        const chart = chartRef.current;
+        if (!chart) {
+            return;
+        }
+        chart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+    }, []);
+    const chartOptions = useMemo(() => {
+        return {
+            legend: {
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: [
+                {
+                    type: "pie",
+                    radius: ["50%", "75%"],
+                    center: ["50%", "50%"],
+                    minAngle: 5,
+                    selectedOffset: 8,
+                    itemStyle: {
+                        borderColor: "#ffffff",
+                        borderWidth: 2,
+                    },
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        position: "center",
+                        fontSize: size === "full" ? 18 : 12,
+                        fontWeight: "bold",
+                        formatter: currentCount.toString(),
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            formatter: "{c}",
                         },
-                        series: [
-                            {
-                                type: "pie",
-                                radius: ["50%", "75%"], //can't be 100 since it'll be cut off when hovering
-                                center: ["50%", "50%"],
-                                minAngle: 10,
-                                selectedOffset: 8,
-                                itemStyle: {
-                                    borderColor: "#ffffff",
-                                    borderWidth: 2,
-                                },
-                                avoidLabelOverlap: false,
-                                label: {
-                                    show: !hovering,
-                                    position: "center",
-                                    fontSize: size === "full" ? 18 : 12,
-                                    fontWeight: "bold",
-                                    formatter: totalCount.toString(),
-                                },
-                                emphasis: {
-                                    label: {
-                                        show: hovering,
-                                        formatter: "{c}",
-                                    },
-                                },
-                                labelLine: {
-                                    show: false,
-                                },
-                                data: data?.map(item => ({
-                                    id: item.id,
-                                    name: item.name,
-                                    value: item.count ?? 0,
-                                    itemStyle: { color: item.color },
-                                })),
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    data: (showOthers ? limitedData : limitedDataWithoutOthers)
+                        .map((item, index) => {
+                        const itemColor = item.color ?? chartColor(index);
+                        return {
+                            id: item.id,
+                            name: item.name,
+                            value: item.count ?? 0,
+                            itemStyle: {
+                                color: itemColor,
                             },
-                        ],
-                    }, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
+                            emphasis: {
+                                disabled: false,
+                                scale: true,
+                                scaleSize: 5,
+                            },
+                            selected: hoveringItem?.id === item.id,
+                        };
+                    })
+                        .filter(item => item.value),
+                },
+            ],
+        };
+    }, [size, currentCount, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
+    return (jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.count, dataTestId: `legend-${item.id}`, disabled: item.count === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
 };
-const cvaChartRoot = cvaMerge([
-    "flex",
-    "flex-direction-col",
-    "flex-wrap-reverse",
-    "justify-between",
-    "items-center",
-    "h-full",
-]);
+const cvaChartRoot = cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
+    variants: {
+        legendPosition: {
+            Right: ["items-center", "justify-items-stretch", "flex-row"],
+            Bottom: ["items-center", "flex-col"],
+        },
+    },
+});
+const cvaChartContainer = cvaMerge(["flex-1", "h-full"], {
+    variants: {
+        legendPosition: {
+            Right: ["justify-end"],
+            Bottom: ["flex", "items-center", "w-full"],
+        },
+    },
+});
+const cvaChart = cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
+    variants: {
+        legendPosition: {
+            Right: [],
+            Bottom: ["max-h-[230px]"],
+        },
+        size: {
+            full: ["min-h-[140px]"],
+            compact: ["w-[60px]", "h-[60px]"],
+        },
+    },
+    defaultVariants: {
+        size: "full",
+    },
+});
+const cvaLegend = cvaMerge(["flex", "overflow-auto"], {
+    variants: {
+        legendPosition: {
+            Right: ["justify-start", "flex-col", "flex-1"],
+            Bottom: ["flex-wrap", "justify-end", "flex-row"],
+        },
+    },
+    defaultVariants: {
+        legendPosition: "Right",
+    },
+});
 
-export { Chart, LegendItem, PieChart };
+export { Chart, DonutChart, LegendItem, useChartColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.3.86",
+  "version": "1.3.88",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,10 +8,11 @@
   },
   "dependencies": {
     "echarts": "5.6.0",
-    "echarts-for-react": "^3.0.2",
     "react": "19.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.71",
-    "@trackunit/react-components": "1.4.86"
+    "@trackunit/ui-design-tokens": "1.3.73",
+    "@trackunit/shared-utils": "1.5.73",
+    "@trackunit/css-class-variance-utilities": "1.3.73",
+    "@trackunit/react-components": "1.4.88"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Chart/Chart.d.ts

@@ -1,6 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
-import { EChartsOption } from "echarts";
+import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
 import { CSSProperties, ReactElement, ReactNode } from "react";
+import { type EventName } from "../EChart/EChart";
 interface UnsafeOptions {
     [key: string]: any;
 }
@@ -12,7 +13,7 @@ type UnsafeOptionsCondition = {
     /**
      * Option values for EChart. Not typed.
      *
-     * @deprecated Use options instead.
+     * @deprecated Use options instead. Will be removed in next major version.
      */
     unsafeOptions: UnsafeOptions;
 };
@@ -24,38 +25,37 @@ type SafeOptionsCondition = {
     /**
      * Option values for EChart. Not typed.
      *
-     * @deprecated Use options instead.
+     * @deprecated Use options instead. Will be removed in next major version.
      */
     unsafeOptions?: never;
 };
 type ConditionalChartOptions = UnsafeOptionsCondition | SafeOptionsCondition;
-/**
- * https://echarts.apache.org/en/api.html#events
- */
-type EventName = "datazoom" | "brush" | "brushselected" | "globalout" | "mouseover" | "mousedown" | "mouseup" | "mouseOut" | "click" | "dblclick" | "contextmenu";
 export type ChartProps = CommonProps & ConditionalChartOptions & {
     /**
-     * Whether or not to low the preloader.
+     * Whether or not to show the preloader.
      */
     showLoading?: boolean;
     /**
-     * onClick event.
+     * onClick event handler.
      */
-    onClick?: (event: any) => void;
+    onClick?: (event: ECElementEvent) => void;
     /**
      * CSS styles for the chart.
      */
     style?: CSSProperties;
     /**
-     * To denote of chart is ready or not.
+     * Called when the chart instance is ready.
      */
-    onChartReady?: (chart: any) => void;
+    onChartReady?: (chart: ECharts) => void;
     /**
      * Event handlers for the chart.
      */
-    onEvents?: Partial<Record<EventName, (event: any) => void>>;
+    onEvents?: Partial<Record<EventName, (event: ECElementEvent) => void>>;
     /**
      * Whether to merge with previous option.
+     *
+     * @deprecated Use notMerge in EChart directly. Will be removed in next major version.
+     * @default true
      */
     merge?: boolean;
     /**
@@ -69,7 +69,9 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
      */
     timezoneLabel?: ReactNode;
     /**
-     * Type of rendered used. Either "svg" or "canvas".
+     * Type of renderer used. Either "svg" or "canvas".
+     *
+     * @default "canvas"
      */
     renderer?: "svg" | "canvas";
     /**
@@ -79,13 +81,7 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
 };
 /**
  * The Chart component is a wrapper component for ECharts.
- *
  * Handles events and click functionality.
- *
- * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
- *
- * @param {ChartProps} props - The props for the Chart component
- * @returns {ReactElement} Chart component
  */
 export declare const Chart: ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => ReactElement;
 export {};