@sekiui/elements 0.0.80 → 0.0.82

package/dist/collection/components/chart/seki-chart.js

@@ -2,6 +2,8 @@ import { Host, h } from "@stencil/core";
 import { Chart, registerables, } from "chart.js";
 import { getChartColors, getGridColor, getTextColor, getBackgroundColor, hexToRgba } from "./chart-theme";
 import { getDefaultOptions, deepMerge } from "./chart-config";
+import { createExternalTooltipHandler } from "./chart-tooltip";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 // Register Chart.js components
 Chart.register(...registerables);
 export class SekiChart {
@@ -9,6 +11,23 @@ export class SekiChart {
         // Props
         this.type = 'line';
         this.height = '300px';
+        // Variant props
+        /** Stack datasets on top of each other (bar/line/area charts) */
+        this.stacked = false;
+        /** Display bar charts horizontally (sets indexAxis to 'y') */
+        this.horizontal = false;
+        /** Apply a gradient fill to line/area chart datasets */
+        this.gradient = false;
+        /** Display pie/doughnut charts with a cutout (donut style) */
+        this.donut = false;
+        /** Hide grid lines on x and y axes */
+        this.hideGrid = false;
+        /** Hide tick labels on x and y axes */
+        this.hideAxes = false;
+        /** Hide the chart legend */
+        this.hideLegend = false;
+        /** Hide tooltips on hover */
+        this.hideTooltip = false;
     }
     render() {
         const containerStyle = {
@@ -16,7 +35,7 @@ export class SekiChart {
             height: this.height,
             position: 'relative',
         };
-        return (h(Host, { key: 'eb676486157293ba9c6f185f81efd5a04bac919d' }, h("div", { key: '0a35063039818a3aedf91c177a3033b7c2f53903', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: '529411721ea65dbc1fe91096f5cf8c6dc7b89ad0', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
+        return (h(Host, { key: '5fa0df579c18b6b4c8fb7b0702d80c38cbb0d5c5' }, h("div", { key: '03e6086d9addc835a63dbd970fcf2cce7d2c0554', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: 'fa80f5b77a6894f36b5b6cf7e187449adc29ed4d', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
     }
     getAriaLabel() {
         var _a, _b;
@@ -57,7 +76,11 @@ export class SekiChart {
     componentDidLoad() {
         this.renderChart();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.chartInstance) {
             this.chartInstance.destroy();
             this.chartInstance = undefined;
@@ -99,14 +122,153 @@ export class SekiChart {
         // Merge default options with user options
         const defaultOptions = getDefaultOptions(this.type, gridColor, textColor, backgroundColor);
         const mergedOptions = chartOptions ? deepMerge(defaultOptions, chartOptions) : defaultOptions;
-        // Create new Chart.js instance
-        const chartType = this.type === 'area' ? 'line' : this.type;
+        // Apply variant props to merged options
+        this.applyVariantOptions(mergedOptions);
+        // Wire up the custom external tooltip (unless tooltips are hidden)
+        if (!this.hideTooltip) {
+            const shadowRoot = this.el.shadowRoot;
+            if (shadowRoot) {
+                if (!mergedOptions.plugins) {
+                    mergedOptions.plugins = {};
+                }
+                if (!mergedOptions.plugins.tooltip) {
+                    mergedOptions.plugins.tooltip = {};
+                }
+                mergedOptions.plugins.tooltip.enabled = false;
+                mergedOptions.plugins.tooltip.external =
+                    createExternalTooltipHandler(shadowRoot);
+            }
+        }
+        // Map chart types to Chart.js types
+        let chartType = this.type;
+        if (this.type === 'area') {
+            chartType = 'line';
+        }
+        // pie, radar, polarArea, scatter map directly to Chart.js types
+        // Apply gradient fill after chart options are ready but before creating the chart
+        if (this.gradient && (this.type === 'area' || this.type === 'line')) {
+            this.applyGradientFill(themedData, colors);
+        }
         this.chartInstance = new Chart(this.canvasRef, {
             type: chartType,
             data: themedData,
             options: mergedOptions,
         });
     }
+    applyVariantOptions(options) {
+        // Stacked: stack datasets on x and y axes
+        if (this.stacked) {
+            if (!options.scales) {
+                options.scales = {};
+            }
+            if (!options.scales['x']) {
+                options.scales['x'] = {};
+            }
+            if (!options.scales['y']) {
+                options.scales['y'] = {};
+            }
+            options.scales['x'].stacked = true;
+            options.scales['y'].stacked = true;
+        }
+        // Horizontal: set indexAxis to 'y' for bar charts
+        if (this.horizontal && this.type === 'bar') {
+            options.indexAxis = 'y';
+        }
+        // Donut: set cutout for pie/doughnut types
+        if (this.donut && (this.type === 'pie' || this.type === 'doughnut')) {
+            if (!options.cutout) {
+                options.cutout = '60%';
+            }
+        }
+        // HideGrid: hide grid lines on x and y axes
+        if (this.hideGrid) {
+            if (options.scales) {
+                if (options.scales['x']) {
+                    if (!options.scales['x'].grid) {
+                        options.scales['x'].grid = {};
+                    }
+                    options.scales['x'].grid.display = false;
+                }
+                if (options.scales['y']) {
+                    if (!options.scales['y'].grid) {
+                        options.scales['y'].grid = {};
+                    }
+                    options.scales['y'].grid.display = false;
+                }
+                // Also handle radar's radial grid
+                if (options.scales['r']) {
+                    if (!options.scales['r'].grid) {
+                        options.scales['r'].grid = {};
+                    }
+                    options.scales['r'].grid.display = false;
+                }
+            }
+        }
+        // HideAxes: hide tick labels on x and y axes
+        if (this.hideAxes) {
+            if (options.scales) {
+                if (options.scales['x']) {
+                    if (!options.scales['x'].ticks) {
+                        options.scales['x'].ticks = {};
+                    }
+                    options.scales['x'].ticks.display = false;
+                }
+                if (options.scales['y']) {
+                    if (!options.scales['y'].ticks) {
+                        options.scales['y'].ticks = {};
+                    }
+                    options.scales['y'].ticks.display = false;
+                }
+                // Also handle radar's radial ticks
+                if (options.scales['r']) {
+                    if (!options.scales['r'].ticks) {
+                        options.scales['r'].ticks = {};
+                    }
+                    options.scales['r'].ticks.display = false;
+                    // Hide point labels on radar as well
+                    if (!options.scales['r'].pointLabels) {
+                        options.scales['r'].pointLabels = {};
+                    }
+                    options.scales['r'].pointLabels.display = false;
+                }
+            }
+        }
+        // HideLegend: hide the chart legend
+        if (this.hideLegend) {
+            if (!options.plugins) {
+                options.plugins = {};
+            }
+            if (!options.plugins.legend) {
+                options.plugins.legend = {};
+            }
+            options.plugins.legend.display = false;
+        }
+        // HideTooltip: disable tooltips
+        if (this.hideTooltip) {
+            if (!options.plugins) {
+                options.plugins = {};
+            }
+            if (!options.plugins.tooltip) {
+                options.plugins.tooltip = {};
+            }
+            options.plugins.tooltip.enabled = false;
+        }
+    }
+    applyGradientFill(data, colors) {
+        var _a, _b;
+        const ctx = (_a = this.canvasRef) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+        if (!ctx)
+            return;
+        const chartHeight = ((_b = this.canvasRef.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || 300;
+        data.datasets.forEach((dataset, index) => {
+            const color = colors[index % colors.length];
+            const gradient = ctx.createLinearGradient(0, 0, 0, chartHeight);
+            gradient.addColorStop(0, hexToRgba(color, 0.4));
+            gradient.addColorStop(1, hexToRgba(color, 0.0));
+            dataset.backgroundColor = gradient;
+            dataset.fill = true;
+        });
+    }
     getColors() {
         var _a;
         // 1. User-provided colors override
@@ -116,10 +278,28 @@ export class SekiChart {
         return getChartColors(this.el);
     }
     applyThemeColors(data, colors) {
+        const isMultiColorType = this.type === 'pie' || this.type === 'polarArea' || this.type === 'doughnut';
+        const isRadar = this.type === 'radar';
+        const isArea = this.type === 'area';
         const datasets = data.datasets.map((dataset, index) => {
             const color = colors[index % colors.length];
-            const isArea = this.type === 'area';
-            return Object.assign(Object.assign({}, dataset), { backgroundColor: isArea ? hexToRgba(color, 0.2) : (dataset.backgroundColor || color), borderColor: dataset.borderColor || color, fill: isArea ? true : dataset.fill });
+            // For pie, polarArea, and doughnut: assign an array of colors (one per data point)
+            if (isMultiColorType) {
+                const dataLength = Array.isArray(dataset.data) ? dataset.data.length : 0;
+                const bgColors = Array.from({ length: dataLength }, (_, i) => colors[i % colors.length]);
+                const borderColors = Array.from({ length: dataLength }, () => 'rgba(255, 255, 255, 0.8)');
+                return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || bgColors, borderColor: dataset.borderColor || borderColors });
+            }
+            // For radar: set backgroundColor with alpha and borderColor
+            if (isRadar) {
+                return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || hexToRgba(color, 0.2), borderColor: dataset.borderColor || color, fill: dataset.fill !== undefined ? dataset.fill : true });
+            }
+            // For area: transparent fill with solid border
+            if (isArea) {
+                return Object.assign(Object.assign({}, dataset), { backgroundColor: hexToRgba(color, 0.2), borderColor: dataset.borderColor || color, fill: true });
+            }
+            // Default: line, bar, scatter
+            return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || color, borderColor: dataset.borderColor || color, fill: dataset.fill });
         });
         return Object.assign(Object.assign({}, data), { datasets });
     }
@@ -142,7 +322,7 @@ export class SekiChart {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartType",
-                    "resolved": "\"area\" | \"bar\" | \"doughnut\" | \"line\"",
+                    "resolved": "\"area\" | \"bar\" | \"doughnut\" | \"line\" | \"pie\" | \"polarArea\" | \"radar\" | \"scatter\"",
                     "references": {
                         "ChartType": {
                             "location": "import",
@@ -191,7 +371,7 @@ export class SekiChart {
                 "mutable": true,
                 "complexType": {
                     "original": "ChartOptions",
-                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; indexAxis?: \"x\" | \"y\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
+                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; }> | undefined; indexAxis?: \"x\" | \"y\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
                     "references": {
                         "ChartOptions": {
                             "location": "import",
@@ -283,6 +463,166 @@ export class SekiChart {
                 "setter": false,
                 "reflect": false,
                 "attribute": "options-json"
+            },
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stack datasets on top of each other (bar/line/area charts)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display bar charts horizontally (sets indexAxis to 'y')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "horizontal",
+                "defaultValue": "false"
+            },
+            "gradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply a gradient fill to line/area chart datasets"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient",
+                "defaultValue": "false"
+            },
+            "donut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display pie/doughnut charts with a cutout (donut style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "donut",
+                "defaultValue": "false"
+            },
+            "hideGrid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide grid lines on x and y axes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-grid",
+                "defaultValue": "false"
+            },
+            "hideAxes": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide tick labels on x and y axes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-axes",
+                "defaultValue": "false"
+            },
+            "hideLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the chart legend"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-legend",
+                "defaultValue": "false"
+            },
+            "hideTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide tooltips on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-tooltip",
+                "defaultValue": "false"
             }
         };
     }
@@ -311,6 +651,30 @@ export class SekiChart {
             }, {
                 "propName": "colors",
                 "methodName": "handlePropsChange"
+            }, {
+                "propName": "stacked",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "horizontal",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "gradient",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "donut",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "hideGrid",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "hideAxes",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "hideLegend",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "hideTooltip",
+                "methodName": "handlePropsChange"
             }];
     }
 }