@progress/kendo-angular-chart-wizard 16.9.0-develop.11 → 16.9.0-develop.13

package/fesm2020/progress-kendo-angular-chart-wizard.mjs

@@ -3,27 +3,28 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, ViewChild, Directive, HostListener, NgModule } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, EventEmitter, Output, HostBinding, Directive, HostListener, NgModule } from '@angular/core';
 import { shouldShowValidationUI, WatermarkOverlayComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
-import * as i2 from '@progress/kendo-angular-l10n';
+import * as i2$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
+import { ChartWizardCommon } from '@progress/kendo-charts';
 import { trashIcon, plusIcon, exportIcon, chartBarClusteredIcon, chartBarStackedIcon, chartBarStacked100Icon, chartPieIcon, chartColumnClusteredIcon, chartColumnStackedIcon, chartColumnStacked100Icon, chartLineIcon, chartLineStackedIcon, chartLineStacked100Icon, chartScatterIcon, filePdfIcon, fileIcon, fileImageIcon } from '@progress/kendo-svg-icons';
-import { ChartComponent, TitleComponent, SubtitleComponent, ChartAreaComponent, CategoryAxisComponent, CategoryAxisItemComponent, ValueAxisComponent, ValueAxisItemComponent, SeriesComponent, SeriesItemComponent, XAxisComponent, XAxisItemComponent, YAxisComponent, YAxisItemComponent, LegendComponent, ThemeService } from '@progress/kendo-angular-charts';
+import { ChartComponent, TitleComponent, SubtitleComponent, ChartAreaComponent, CategoryAxisComponent, CategoryAxisItemComponent, ValueAxisComponent, ValueAxisItemComponent, SeriesComponent, SeriesItemComponent, LegendComponent, XAxisComponent, XAxisItemComponent, YAxisComponent, YAxisItemComponent, ThemeService } from '@progress/kendo-angular-charts';
 import { saveAs } from '@progress/kendo-file-saver';
 import { exportPDF } from '@progress/kendo-drawing';
-import { DropDownListComponent, ComboBoxComponent, ValueTemplateDirective } from '@progress/kendo-angular-dropdowns';
-import { NumericTextBoxComponent, ColorPickerComponent, TextBoxComponent, CheckBoxComponent, SwitchComponent } from '@progress/kendo-angular-inputs';
-import { LabelComponent } from '@progress/kendo-angular-label';
-import { NgIf, NgFor } from '@angular/common';
-import { ExpansionPanelComponent, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective } from '@progress/kendo-angular-layout';
-import * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import * as i1 from '@progress/kendo-angular-grid';
 import { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective } from '@progress/kendo-angular-grid';
+import { NgIf, NgFor } from '@angular/common';
+import { ExpansionPanelComponent, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective } from '@progress/kendo-angular-layout';
+import { DropDownListComponent, ValueTemplateDirective, ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
 import { ButtonComponent, FocusableDirective, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { SVGIconComponent, IconsService } from '@progress/kendo-angular-icons';
 import { WindowComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { NumericTextBoxComponent, ColorPickerComponent, TextBoxComponent, CheckBoxComponent, SwitchComponent } from '@progress/kendo-angular-inputs';
+import { LabelComponent } from '@progress/kendo-angular-label';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { getter } from '@progress/kendo-common';
 
@@ -34,525 +35,63 @@ const packageMetadata = {
     name: '@progress/kendo-angular-chart-wizard',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1725288184,
-    version: '16.9.0-develop.11',
+    publishDate: 1725539896,
+    version: '16.9.0-develop.13',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
 /**
  * @hidden
  */
-const fontSizes = [
-    { text: '16', value: '16px' },
-    { text: '20', value: '20px' },
-    { text: '24', value: '24px' },
-    { text: '48', value: '48px' },
-    { text: '60', value: '60px' },
-    { text: '96', value: '96px' },
-];
-/**
- * @hidden
- */
-const fontNames = [
-    { text: 'Arial', value: 'Arial, Helvetica, sans-serif',
-        style: { fontFamily: 'Arial, Helvetica, sans-serif' } },
-    { text: 'Courier New', value: '\'Courier New\', Courier, monospace',
-        style: { fontFamily: '\'Courier New\', Courier, monospace' } },
-    { text: 'Georgia', value: 'Georgia, serif',
-        style: { fontFamily: 'Georgia, serif' } },
-    { text: 'Impact', value: 'Impact, Charcoal, sans-serif',
-        style: { fontFamily: 'Impact, Charcoal, sans-serif' } },
-    { text: 'Lucida Console', value: '\'Lucida Console\', Monaco, monospace',
-        style: { fontFamily: '\'Lucida Console\', Monaco, monospace' } },
-    { text: 'Tahoma', value: 'Tahoma, Geneva, sans-serif',
-        style: { fontFamily: 'Tahoma, Geneva, sans-serif' } },
-    { text: 'Times New Roman', value: '\'Times New Roman\', Times,serif',
-        style: { fontFamily: '\'Times New Roman\', Times,serif' } },
-    { text: 'Trebuchet MS', value: '\'Trebuchet MS\', Helvetica, sans-serif',
-        style: { fontFamily: '\'Trebuchet MS\', Helvetica, sans-serif' } },
-    { text: 'Verdana', value: 'Verdana, Geneva, sans-serif',
-        style: { fontFamily: 'Verdana, Geneva, sans-serif' } }
-];
+const fontSizes = ChartWizardCommon.fontSizes;
 /**
  * @hidden
  */
-const rotations = [
-    { text: 'Auto', value: 'auto' },
-    { text: '0°', value: 0 },
-    { text: '45°', value: 45 },
-    { text: '90°', value: 90 },
-    { text: '135°', value: 135 },
-    { text: '180°', value: 180 }
-];
+const fontNames = ChartWizardCommon.fontNames;
 /**
  * @hidden
  */
-const positions = [
-    { text: 'Top', value: 'top' },
-    { text: 'Bottom', value: 'bottom' },
-    { text: 'Left', value: 'left' },
-    { text: 'Right', value: 'right' }
-];
-const columnType = 'column';
-const barType = 'bar';
-const lineType = 'line';
-const pieType = 'pie';
-const scatterType = 'scatter';
-const categoricalTypes = [columnType, barType, lineType, scatterType];
-const scatterSeries = {
-    type: lineType,
-    width: 0
-};
+const createState = ChartWizardCommon.createState;
 /**
  * @hidden
  */
-const isCategorical = (type) => type && categoricalTypes.includes(type);
-const categoryTypes = ['string', 'date', 'number'];
-const valueTypes = ['number'];
-const axesDefinitions = {
-    bar: [
-        { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
-    ],
-    column: [
-        { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
-    ],
-    line: [
-        { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
-    ],
-    pie: [
-        { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes, count: 1 },
-    ],
-    scatter: [
-        { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes }
-    ]
-};
-const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
+const updateState = ChartWizardCommon.updateState;
 /**
  * @hidden
  */
-const parseFont = (font) => {
-    const spaceIndex = (font || '').indexOf(' ');
-    const size = font?.substring(0, spaceIndex);
-    const name = font?.substring(spaceIndex + 1);
-    return { size, name };
-};
-const updateFontName = (fontName, defaultSize, currentFont) => {
-    const { size } = parseFont(currentFont);
-    return fontName ? getFont(fontName, size || defaultSize) : '';
-};
-const updateFontSize = (fontSize, defaultFontName, currentFont) => {
-    const { name } = parseFont(currentFont);
-    return fontSize ? getFont(name || defaultFontName, fontSize) : '';
-};
-const getCategoryColumnIndex = (data, categoryDef) => {
-    const candidates = [];
-    const firstRecord = data[0].slice();
-    categoryDef.types.forEach((type) => {
-        firstRecord.forEach((item, i) => {
-            if (typeof item.value === type) {
-                candidates.push(i);
-            }
-        });
-    });
-    const result = candidates.findIndex((index) => {
-        const values = data.map((record) => record[index].value);
-        return new Set(values).size === values.length;
-    });
-    return Math.max(result, 0);
-};
-const getValueColumnIndexes = (data, valuesDef) => {
-    const candidates = [];
-    const firstRecord = data[0].slice();
-    valuesDef.forEach((def) => {
-        def.types.forEach((type) => {
-            firstRecord.forEach((item, i) => {
-                if (typeof item.value === type) {
-                    candidates.push(i);
-                }
-            });
-        });
-    });
-    return candidates;
-};
-const emptyState = () => structuredClone({
-    columns: [],
-    data: [],
-    series: [],
-    initialSeries: [],
-    categoryAxis: [],
-    valueAxis: [{ labels: { visible: true, rotation: 'auto' } }],
-    area: {
-        margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
-    },
-    stack: false
-});
-const categoryValueChartState = (data, seriesType, options) => {
-    const state = emptyState();
-    state.seriesType = seriesType;
-    state.data = data;
-    const chartDef = axesDefinitions[seriesType];
-    if (!chartDef) {
-        return state;
-    }
-    const firstRecord = data[0].slice();
-    state.columns = data[0].map(i => String(i.field));
-    const categoryDef = chartDef.find(def => def.axisType === 'category');
-    let catIndex = -1;
-    if (categoryDef) {
-        catIndex = options?.categoryAxis ? state.columns.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
-    }
-    const valuesDef = chartDef.filter(def => def.axisType === 'value');
-    let valuesIndexes = getValueColumnIndexes(data, valuesDef);
-    if (valuesIndexes.includes(catIndex)) {
-        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
-    }
-    const series = [];
-    valuesIndexes.forEach(index => {
-        const valuesColumn = firstRecord[index];
-        const valuesResult = [];
-        data.forEach(record => {
-            valuesResult.push(record[index].value);
-        });
-        series.push({
-            name: valuesColumn.field,
-            type: seriesType,
-            data: valuesResult,
-            stack: false,
-            labels: { visible: false },
-            ...(seriesType === scatterType ? scatterSeries : {})
-        });
-    });
-    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
-    if (series.length) {
-        state.series = series.map((s, i) => ({ ...s, id: i }));
-        state.initialSeries = structuredClone(state.series);
-    }
-    if (categories.length) {
-        state.categoryAxis = [{ categories, labels: { visible: true, rotation: 'auto' } }];
-        state.categoryField = state.columns[catIndex];
-    }
-    state.legend = { visible: true, position: 'bottom' };
-    state.title = { text: null };
-    state.subtitle = { text: null };
-    return state;
-};
-const pieChartState = (data, seriesType, options) => {
-    const state = emptyState();
-    state.seriesType = seriesType;
-    state.data = data;
-    const chartDef = axesDefinitions[seriesType];
-    if (!chartDef) {
-        return state;
-    }
-    const categoriesAxis = data[0].map(i => i.field);
-    const categoryDef = chartDef.find(def => def.axisType === 'category');
-    let catIndex = -1;
-    if (categoryDef) {
-        catIndex = options?.categoryAxis ? categoriesAxis.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
-    }
-    const valuesDef = chartDef.filter(def => def.axisType === 'value');
-    let valuesIndexes = [];
-    if (options?.valueAxis) {
-        valuesIndexes = [categoriesAxis.indexOf(options.valueAxis)];
-    }
-    else {
-        valuesIndexes = getValueColumnIndexes(data, valuesDef);
-    }
-    if (valuesIndexes.includes(catIndex) && valuesIndexes.length > 1) {
-        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
-    }
-    if (typeof valuesDef[0].count === 'number') {
-        valuesIndexes = valuesIndexes.slice(0, valuesDef[0].count);
-    }
-    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
-    const flatData = [];
-    data.forEach(item => {
-        const record = {};
-        valuesIndexes.forEach((index) => {
-            const col = item[index];
-            record[col.field] = col.value;
-            record[item[catIndex].field] = item[catIndex].value;
-        });
-        flatData.push(record);
-    });
-    state.columns = categoriesAxis;
-    state.categoryAxis = [{ categories, title: { text: '' } }];
-    state.series = [{
-            id: 0,
-            data: flatData,
-            type: seriesType,
-            name: categoriesAxis[catIndex],
-            labels: { visible: true },
-            categoryField: categoriesAxis[catIndex],
-            field: categoriesAxis[valuesIndexes[0]]
-        }];
-    state.categoryField = categoriesAxis[catIndex];
-    state.valueField = categoriesAxis[valuesIndexes[0]];
-    state.initialSeries = structuredClone(state.series);
-    return state;
-};
-const hasValue = (value) => value !== undefined && value !== null;
+const mergeStates = ChartWizardCommon.mergeStates;
 /**
  * @hidden
  */
-const createInitialState = (data, seriesType, defaultState) => {
-    const state = createState(data, defaultState?.seriesType || seriesType);
-    return typeof defaultState?.stack !== 'undefined' ?
-        updateState(state, ActionTypes.stacked, defaultState.stack) : state;
-};
+const isCategorical = ChartWizardCommon.isCategorical;
 /**
  * @hidden
  */
-const createState = (data, seriesType) => {
-    return (isCategorical(seriesType) ? categoryValueChartState : pieChartState)(data, seriesType);
-};
+const parseFont = ChartWizardCommon.parseFont;
 /**
  * @hidden
  */
-var ActionTypes;
-(function (ActionTypes) {
-    ActionTypes[ActionTypes["seriesType"] = 0] = "seriesType";
-    ActionTypes[ActionTypes["stacked"] = 1] = "stacked";
-    ActionTypes[ActionTypes["categoryAxisX"] = 2] = "categoryAxisX";
-    ActionTypes[ActionTypes["valueAxisY"] = 3] = "valueAxisY";
-    ActionTypes[ActionTypes["seriesChange"] = 4] = "seriesChange";
-    ActionTypes[ActionTypes["areaMarginLeft"] = 5] = "areaMarginLeft";
-    ActionTypes[ActionTypes["areaMarginRight"] = 6] = "areaMarginRight";
-    ActionTypes[ActionTypes["areaMarginTop"] = 7] = "areaMarginTop";
-    ActionTypes[ActionTypes["areaMarginBottom"] = 8] = "areaMarginBottom";
-    ActionTypes[ActionTypes["areaBackground"] = 9] = "areaBackground";
-    ActionTypes[ActionTypes["titleText"] = 10] = "titleText";
-    ActionTypes[ActionTypes["titleFontName"] = 11] = "titleFontName";
-    ActionTypes[ActionTypes["titleFontSize"] = 12] = "titleFontSize";
-    ActionTypes[ActionTypes["titleColor"] = 13] = "titleColor";
-    ActionTypes[ActionTypes["subtitleText"] = 14] = "subtitleText";
-    ActionTypes[ActionTypes["subtitleFontName"] = 15] = "subtitleFontName";
-    ActionTypes[ActionTypes["subtitleFontSize"] = 16] = "subtitleFontSize";
-    ActionTypes[ActionTypes["subtitleColor"] = 17] = "subtitleColor";
-    ActionTypes[ActionTypes["seriesColor"] = 18] = "seriesColor";
-    ActionTypes[ActionTypes["seriesLabel"] = 19] = "seriesLabel";
-    ActionTypes[ActionTypes["legendVisible"] = 20] = "legendVisible";
-    ActionTypes[ActionTypes["legendFontName"] = 21] = "legendFontName";
-    ActionTypes[ActionTypes["legendFontSize"] = 22] = "legendFontSize";
-    ActionTypes[ActionTypes["legendColor"] = 23] = "legendColor";
-    ActionTypes[ActionTypes["legendPosition"] = 24] = "legendPosition";
-    ActionTypes[ActionTypes["categoryAxisTitleText"] = 25] = "categoryAxisTitleText";
-    ActionTypes[ActionTypes["categoryAxisTitleFontName"] = 26] = "categoryAxisTitleFontName";
-    ActionTypes[ActionTypes["categoryAxisTitleFontSize"] = 27] = "categoryAxisTitleFontSize";
-    ActionTypes[ActionTypes["categoryAxisTitleColor"] = 28] = "categoryAxisTitleColor";
-    ActionTypes[ActionTypes["categoryAxisLabelsFontName"] = 29] = "categoryAxisLabelsFontName";
-    ActionTypes[ActionTypes["categoryAxisLabelsFontSize"] = 30] = "categoryAxisLabelsFontSize";
-    ActionTypes[ActionTypes["categoryAxisLabelsColor"] = 31] = "categoryAxisLabelsColor";
-    ActionTypes[ActionTypes["categoryAxisLabelsRotation"] = 32] = "categoryAxisLabelsRotation";
-    ActionTypes[ActionTypes["categoryAxisReverseOrder"] = 33] = "categoryAxisReverseOrder";
-    ActionTypes[ActionTypes["valueAxisTitleText"] = 34] = "valueAxisTitleText";
-    ActionTypes[ActionTypes["valueAxisTitleFontName"] = 35] = "valueAxisTitleFontName";
-    ActionTypes[ActionTypes["valueAxisTitleFontSize"] = 36] = "valueAxisTitleFontSize";
-    ActionTypes[ActionTypes["valueAxisTitleColor"] = 37] = "valueAxisTitleColor";
-    ActionTypes[ActionTypes["valueAxisLabelsFormat"] = 38] = "valueAxisLabelsFormat";
-    ActionTypes[ActionTypes["valueAxisLabelsFontName"] = 39] = "valueAxisLabelsFontName";
-    ActionTypes[ActionTypes["valueAxisLabelsFontSize"] = 40] = "valueAxisLabelsFontSize";
-    ActionTypes[ActionTypes["valueAxisLabelsColor"] = 41] = "valueAxisLabelsColor";
-    ActionTypes[ActionTypes["valueAxisLabelsRotation"] = 42] = "valueAxisLabelsRotation";
-})(ActionTypes || (ActionTypes = {}));
+const ActionTypes = ChartWizardCommon.ActionTypes;
 /**
  * @hidden
  */
-const mergeStates = (state, newState) => {
-    newState.legend = state.legend;
-    newState.area = state.area;
-    newState.title = state.title;
-    newState.subtitle = state.subtitle;
-    if (newState.series.length === state.series.length) {
-        for (let i = 0; i < newState.series.length; i++) {
-            newState.series[i].color = state.series[i].color;
-            newState.series[i].labels = state.series[i].labels;
-        }
-    }
-    if (state.series.every(s => s.labels?.visible) && isCategorical(newState.seriesType) && isCategorical(state.seriesType)) {
-        newState.series.forEach(s => {
-            s.labels = s.labels || {};
-            s.labels.visible = true;
-        });
-    }
-    return newState;
-};
+const rotations = [
+    { text: 'Auto', value: 'auto' },
+    { text: '0°', value: 0 },
+    { text: '45°', value: 45 },
+    { text: '90°', value: 90 },
+    { text: '135°', value: 135 },
+    { text: '180°', value: 180 }
+];
 /**
  * @hidden
  */
-const updateState = (currentState, action, value) => {
-    const state = { ...currentState };
-    switch (action) {
-        case ActionTypes.seriesType:
-            return createState(state.data, value);
-        case ActionTypes.stacked:
-            state.series = state.series.map(s => ({ ...s, stack: value }));
-            return state;
-        case ActionTypes.categoryAxisX: {
-            if (state.seriesType && isCategorical(state.seriesType)) {
-                const newState = categoryValueChartState(state.data, state.seriesType, { categoryAxis: value });
-                return mergeStates(state, newState);
-            }
-            else if (state.seriesType === pieType) {
-                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: value });
-                return mergeStates(state, newState);
-            }
-            return state;
-        }
-        case ActionTypes.valueAxisY: {
-            if (state.seriesType === pieType) {
-                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: state.categoryField, valueAxis: value });
-                return mergeStates(state, newState);
-            }
-            return state;
-        }
-        case ActionTypes.seriesChange:
-            state.series = value;
-            return state;
-        case ActionTypes.areaMarginLeft:
-            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), left: value } };
-            return state;
-        case ActionTypes.areaMarginRight:
-            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), right: value } };
-            return state;
-        case ActionTypes.areaMarginTop:
-            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), top: value } };
-            return state;
-        case ActionTypes.areaMarginBottom:
-            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), bottom: value } };
-            return state;
-        case ActionTypes.areaBackground:
-            state.area = { ...state.area, background: value };
-            return state;
-        case ActionTypes.titleText:
-            state.title = { ...state.title, text: value };
-            return state;
-        case ActionTypes.titleFontName: {
-            state.title = { ...state.title, font: updateFontName(value, fontSizes[0].value, state.title?.font) };
-            return state;
-        }
-        case ActionTypes.titleFontSize:
-            state.title = { ...state.title, font: updateFontSize(value, fontNames[0].value, state.title?.font) };
-            return state;
-        case ActionTypes.titleColor:
-            state.title = { ...state.title, color: value };
-            return state;
-        case ActionTypes.subtitleText:
-            state.subtitle = { ...state.subtitle, text: value };
-            return state;
-        case ActionTypes.subtitleFontName:
-            state.subtitle = { ...state.subtitle, font: updateFontName(value, fontSizes[0].value, state.subtitle?.font) };
-            return state;
-        case ActionTypes.subtitleFontSize:
-            state.subtitle = { ...state.subtitle, font: updateFontSize(value, fontNames[0].value, state.subtitle?.font) };
-            return state;
-        case ActionTypes.subtitleColor:
-            state.subtitle = { ...state.subtitle, color: value };
-            return state;
-        case ActionTypes.seriesColor:
-            state.series = state.series.map(s => ({ ...s, color: value.seriesName === s.name ? value.color : s.color }));
-            return state;
-        case ActionTypes.seriesLabel:
-            state.series = state.series.map(s => {
-                if (value.all || value.seriesName === s.name) {
-                    return { ...s, labels: { visible: value.visible } };
-                }
-                return s;
-            });
-            return state;
-        case ActionTypes.legendVisible:
-            state.legend = { ...state.legend, visible: value };
-            return state;
-        case ActionTypes.legendFontName: {
-            state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontName(value, fontSizes[0].value, state.legend?.labels?.font) } };
-            return state;
-        }
-        case ActionTypes.legendFontSize:
-            state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontSize(value, fontNames[0].value, state.legend?.labels?.font) } };
-            return state;
-        case ActionTypes.legendColor:
-            state.legend = { ...state.legend, labels: { ...state.legend?.labels, color: value } };
-            return state;
-        case ActionTypes.legendPosition:
-            state.legend = { ...state.legend, position: value };
-            return state;
-        case ActionTypes.categoryAxisTitleText:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
-            return state;
-        case ActionTypes.categoryAxisTitleFontName: {
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
-            return state;
-        }
-        case ActionTypes.categoryAxisTitleFontSize:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
-            return state;
-        case ActionTypes.categoryAxisTitleColor:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
-            return state;
-        case ActionTypes.categoryAxisLabelsFontName: {
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
-            return state;
-        }
-        case ActionTypes.categoryAxisLabelsFontSize:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
-            return state;
-        case ActionTypes.categoryAxisLabelsColor:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
-            return state;
-        case ActionTypes.categoryAxisLabelsRotation: {
-            const rotation = hasValue(value) ? value : 'auto';
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
-            return state;
-        }
-        case ActionTypes.categoryAxisReverseOrder:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, reverse: value }));
-            return state;
-        case ActionTypes.valueAxisTitleText: {
-            if (!state.valueAxis || state.valueAxis.length === 0) {
-                state.valueAxis = [{ title: { text: value } }];
-            }
-            else {
-                state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
-            }
-            return state;
-        }
-        case ActionTypes.valueAxisTitleFontName: {
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
-            return state;
-        }
-        case ActionTypes.valueAxisTitleFontSize:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
-            return state;
-        case ActionTypes.valueAxisTitleColor:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
-            return state;
-        case ActionTypes.valueAxisLabelsFormat:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, format: value } }));
-            return state;
-        case ActionTypes.valueAxisLabelsFontName: {
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
-            return state;
-        }
-        case ActionTypes.valueAxisLabelsFontSize:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
-            return state;
-        case ActionTypes.valueAxisLabelsColor:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
-            return state;
-        case ActionTypes.valueAxisLabelsRotation: {
-            const rotation = hasValue(value) ? value : 'auto';
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
-            return state;
-        }
-        default:
-            return state;
-    }
-};
+const positions = [
+    { text: 'Top', value: 'top' },
+    { text: 'Bottom', value: 'bottom' },
+    { text: 'Left', value: 'left' },
+    { text: 'Right', value: 'right' }
+];
 
 /**
  * @hidden
@@ -586,7 +125,9 @@ class StateService {
             series: [],
             initialSeries: [],
             columns: [],
-            data: []
+            data: [],
+            area: { margin: { top: 0, right: 0, bottom: 0, left: 0 } },
+            seriesType: 'bar'
         };
         this.seriesType = 'bar';
         this.currentTitle = 'Chart Title';
@@ -607,1770 +148,1794 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class ChartWizardPropertyPaneFormFieldComponent {
-    constructor(localization, cdr) {
-        this.localization = localization;
+class ChartWizardPropertyPaneDataTabComponent {
+    constructor(stateService, formBuilder, cdr, renderer) {
+        this.stateService = stateService;
+        this.formBuilder = formBuilder;
         this.cdr = cdr;
-        this.colSpan = 1;
-        this.hasLabel = true;
-        this.isLabelInsideFormFieldWrap = false;
-        this.disabled = false;
-        this.valueChange = new EventEmitter();
-        this.formField = true;
+        this.renderer = renderer;
+        this.categoryAxisX = ActionTypes.categoryAxisX;
+        this.valueAxisY = ActionTypes.valueAxisY;
+        this.trashIcon = trashIcon;
+        this.plusIcon = plusIcon;
+        this.isCategorical = isCategorical;
+        this.formGroup = this.formBuilder.group({
+            name: null,
+        });
     }
-    get isColSpan2() {
-        return this.colSpan === 2;
+    ngAfterViewInit() {
+        if (this.grid) {
+            const gridHeader = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-header');
+            const gridContent = this.grid.wrapper.nativeElement.querySelector('.k-grid .k-grid-content');
+            this.renderer.setStyle(gridHeader, 'display', 'none');
+            this.renderer.setStyle(gridContent, 'overflow', 'auto');
+        }
     }
-    ngAfterViewChecked() {
-        this.localization.changes.subscribe(() => {
-            this.cdr.detectChanges();
+    updateState(action, value) {
+        this.stateService.state = updateState(this.stateService.state, action, value);
+    }
+    createFormGroup(args) {
+        const item = args.isNew ? {} : args.dataItem;
+        this.formGroup = this.formBuilder.group({
+            name: item.name,
         });
+        return this.formGroup;
     }
-    ngOnDestroy() {
-        this.localization.changes.unsubscribe();
+    addData() {
+        this.stateService.state.series.push(this.stateService.deletedSeries[0]);
+        this.stateService.deletedSeries.shift();
+        this.updateState(ActionTypes.seriesChange, this.stateService.state.series);
     }
-    ngAfterViewInit() {
-        if (this.hasLabel) {
-            this.label.for =
-                this.numericTextBox ||
-                    this.colorPicker ||
-                    this.dropDownList ||
-                    this.textBox ||
-                    this.comboBox ||
-                    this.checkBox;
-        }
+    removeData(event) {
+        this.stateService.deletedSeries.push(event.dataItem);
+        this.updateState(ActionTypes.seriesChange, event.sender.data.data);
+    }
+    onRowReorder(grid) {
+        this.updateState(ActionTypes.seriesChange, grid.data.data);
+    }
+    isDisabled(grid) {
+        return grid.data.data.length === this.stateService.state.initialSeries.length;
+    }
+    detectChanges() {
+        this.cdr.detectChanges();
     }
 }
-ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
-        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
-        <div class="k-form-field-wrap">
-            <kendo-label
-                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
-                class="k-form-label"
-                [text]="text"
-            ></kendo-label>
-            <kendo-numerictextbox
-                *ngIf="inputType === 'numeric'"
-                fillMode="outline"
-                rounded="medium"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-                placeholder="Auto"
-            ></kendo-numerictextbox>
-            <kendo-colorpicker
-                *ngIf="inputType === 'colorPicker'"
-                fillMode="outline"
-                rounded="medium"
-                [value]="value"
-                [disabled]="disabled"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-colorpicker>
-            <kendo-dropdownlist
-                *ngIf="inputType === 'dropDownList'"
-                [data]="data"
-                textField="text"
-                valueField="value"
-                [valuePrimitive]="true"
-                fillMode="outline"
-                rounded="medium"
-                size="medium"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-dropdownlist>
-            <kendo-combobox
-                *ngIf="inputType === 'comboBox'"
-                [data]="data"
-                [value]="value"
-                textField="text"
-                valueField="value"
-                [valuePrimitive]="true"
-                fillMode="outline"
-                rounded="medium"
-                size="medium"
-                [placeholder]="placeholder"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-combobox>
-            <kendo-textbox
-                *ngIf="inputType === 'text'"
-                fillMode="outline"
-                rounded="medium"
-                [placeholder]="placeholder"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-textbox>
-            <kendo-checkbox
-                *ngIf="inputType === 'checkbox'"
-                class="k-checkbox-md k-rounded-md"
-                [checkedState]="value"
-                (checkedStateChange)="valueChange.emit($event)"
-            ></kendo-checkbox>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chartwizard-property-pane-form-field',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
-        <div class="k-form-field-wrap">
-            <kendo-label
-                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
-                class="k-form-label"
-                [text]="text"
-            ></kendo-label>
-            <kendo-numerictextbox
-                *ngIf="inputType === 'numeric'"
-                fillMode="outline"
-                rounded="medium"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-                placeholder="Auto"
-            ></kendo-numerictextbox>
-            <kendo-colorpicker
-                *ngIf="inputType === 'colorPicker'"
-                fillMode="outline"
-                rounded="medium"
-                [value]="value"
-                [disabled]="disabled"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-colorpicker>
-            <kendo-dropdownlist
-                *ngIf="inputType === 'dropDownList'"
-                [data]="data"
-                textField="text"
-                valueField="value"
-                [valuePrimitive]="true"
-                fillMode="outline"
-                rounded="medium"
-                size="medium"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-dropdownlist>
-            <kendo-combobox
-                *ngIf="inputType === 'comboBox'"
-                [data]="data"
-                [value]="value"
-                textField="text"
-                valueField="value"
-                [valuePrimitive]="true"
-                fillMode="outline"
-                rounded="medium"
-                size="medium"
-                [placeholder]="placeholder"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-combobox>
-            <kendo-textbox
-                *ngIf="inputType === 'text'"
-                fillMode="outline"
-                rounded="medium"
-                [placeholder]="placeholder"
-                [value]="value"
-                (valueChange)="valueChange.emit($event)"
-            ></kendo-textbox>
-            <kendo-checkbox
-                *ngIf="inputType === 'checkbox'"
-                class="k-checkbox-md k-rounded-md"
-                [checkedState]="value"
-                (checkedStateChange)="valueChange.emit($event)"
-            ></kendo-checkbox>
-        </div>
+ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: StateService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
+                    >
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="">
+                        </kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.state.seriesType === 'pie'"
+                >
+                    <legend class="k-form-legend">
+                        {{ 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.valueField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
+                    >
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chartwizard-property-pane-data-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
+                    >
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.state.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="">
+                        </kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.state.seriesType === 'pie'"
+                >
+                    <legend class="k-form-legend">
+                        {{ 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.valueField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
+                    >
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
     `,
                     standalone: true,
                     imports: [
-                        NgIf,
-                        LabelComponent,
-                        NumericTextBoxComponent,
-                        ColorPickerComponent,
+                        ExpansionPanelComponent,
                         DropDownListComponent,
-                        ComboBoxComponent,
-                        TextBoxComponent,
-                        CheckBoxComponent
+                        ValueTemplateDirective,
+                        NgIf,
+                        GridComponent,
+                        ReactiveEditingDirective,
+                        DataBindingDirective,
+                        ToolbarTemplateDirective,
+                        ButtonComponent,
+                        RowReorderColumnComponent,
+                        ColumnComponent,
+                        CommandColumnComponent,
+                        CellTemplateDirective,
+                        GridToolbarFocusableDirective,
+                        FocusableDirective,
+                        RemoveCommandDirective
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentState: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], inputType: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], colSpan: [{
-                type: Input
-            }], hasLabel: [{
-                type: Input
-            }], isLabelInsideFormFieldWrap: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], formField: [{
-                type: HostBinding,
-                args: ['class.k-form-field']
-            }], isColSpan2: [{
-                type: HostBinding,
-                args: ['class.k-col-span-2']
-            }], label: [{
-                type: ViewChild,
-                args: [LabelComponent]
-            }], numericTextBox: [{
-                type: ViewChild,
-                args: [NumericTextBoxComponent]
-            }], colorPicker: [{
-                type: ViewChild,
-                args: [ColorPickerComponent]
-            }], dropDownList: [{
-                type: ViewChild,
-                args: [DropDownListComponent]
-            }], textBox: [{
-                type: ViewChild,
-                args: [TextBoxComponent]
-            }], comboBox: [{
-                type: ViewChild,
-                args: [ComboBoxComponent]
-            }], checkBox: [{
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { grid: [{
                 type: ViewChild,
-                args: [CheckBoxComponent]
+                args: [GridComponent]
             }] } });
 
 /**
  * @hidden
  */
-class ChartWizardPropertyPaneDataTabComponent {
-    constructor(stateService, localization, cdr) {
+class ChartWizardSeriesTypeButtonComponent {
+    constructor(stateService) {
         this.stateService = stateService;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.chartTitles = [
-            { text: 'Chart Title', value: 'Chart Title' },
-            { text: 'Chart Subtitle', value: 'Chart Subtitle' },
-        ];
-        this.titleText = ActionTypes.titleText;
-        this.titleFontName = ActionTypes.titleFontName;
-        this.titleFontSize = ActionTypes.titleFontSize;
-        this.titleColor = ActionTypes.titleColor;
-        this.subtitleText = ActionTypes.subtitleText;
-        this.subtitleFontName = ActionTypes.subtitleFontName;
-        this.subtitleFontSize = ActionTypes.subtitleFontSize;
-        this.subtitleColor = ActionTypes.subtitleColor;
-        this.areaMarginLeft = ActionTypes.areaMarginLeft;
-        this.areaMarginRight = ActionTypes.areaMarginRight;
-        this.areaMarginTop = ActionTypes.areaMarginTop;
-        this.areaMarginBottom = ActionTypes.areaMarginBottom;
-        this.areaBackground = ActionTypes.areaBackground;
-        this.legendVisible = ActionTypes.legendVisible;
-        this.legendFontName = ActionTypes.legendFontName;
-        this.legendFontSize = ActionTypes.legendFontSize;
-        this.legendColor = ActionTypes.legendColor;
-        this.legendPosition = ActionTypes.legendPosition;
-        this.seriesColor = ActionTypes.seriesColor;
-        this.seriesLabel = ActionTypes.seriesLabel;
-        this.categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
-        this.categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
-        this.categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
-        this.categoryAxisTitleColor = ActionTypes.categoryAxisTitleColor;
-        this.categoryAxisLabelsFontName = ActionTypes.categoryAxisLabelsFontName;
-        this.categoryAxisLabelsFontSize = ActionTypes.categoryAxisLabelsFontSize;
-        this.categoryAxisLabelsColor = ActionTypes.categoryAxisLabelsColor;
-        this.categoryAxisLabelsRotation = ActionTypes.categoryAxisLabelsRotation;
-        this.categoryAxisReverseOrder = ActionTypes.categoryAxisReverseOrder;
-        this.valueAxisTitleText = ActionTypes.valueAxisTitleText;
-        this.valueAxisTitleFontName = ActionTypes.valueAxisTitleFontName;
-        this.valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
-        this.valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
-        this.valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
-        this.valueAxisLabelsFormat = ActionTypes.valueAxisLabelsFormat;
-        this.valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
-        this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
-        this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
-        this.parseFont = parseFont;
-        this.labelFormats = labelFormats;
-        this.defaultAllSeriesItem = defaultAllSeriesItem;
-        this.fontNames = fontNames;
-        this.fontSizes = fontSizes;
-        this.legendPositions = positions;
-        this.labelsRotation = rotations;
-    }
-    get chartTitleTypeText() {
-        return this.stateService.currentTitle === 'Chart Title'
-            ? this.stateService.state.title?.text
-            : this.stateService.state.subtitle?.text;
-    }
-    get chartTitleTypeFont() {
-        return this.stateService.currentTitle === 'Chart Title'
-            ? parseFont(this.stateService.state.title?.font).name
-            : parseFont(this.stateService.state.subtitle?.font).name;
-    }
-    get chartTitleTypeFontSize() {
-        return this.stateService.currentTitle === 'Chart Title'
-            ? parseFont(this.stateService.state.title?.font).size
-            : parseFont(this.stateService.state.subtitle?.font).size;
-    }
-    get chartTitleTypeColor() {
-        return this.stateService.currentTitle === 'Chart Title'
-            ? this.stateService.state.title?.color
-            : this.stateService.state.subtitle?.color;
-    }
-    get chartTitleTypeAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleText : this.subtitleText;
-    }
-    get chartTitleTypeFontAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontName : this.subtitleFontName;
-    }
-    get chartTitleTypeColorAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleColor : this.subtitleColor;
-    }
-    get chartTitleTypeFontSizeAction() {
-        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
+        this.stack = false;
     }
-    get seriesData() {
-        return [defaultAllSeriesItem, ...this.stateService.state.series];
+    onSelect() {
+        this.stateService.seriesType = this.seriesType;
+        if (this.stateService.data.length > 0) {
+            this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+            this.stateService.currentSeries = {};
+            if (this.stack) {
+                this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
+            }
+        }
+        this.stateService.dataTab.detectChanges();
     }
-    get showLabels() {
-        return this.stateService.currentSeries.name !== defaultAllSeriesItem.name ? this.stateService.state.series.find(s => s.name === this.stateService.currentSeries.name)?.labels?.visible : this.stateService.state.series.every(s => s.labels?.visible);
+    isSelected() {
+        return (this.stateService.state.seriesType === this.seriesType &&
+            this.stateService.state.series[0]?.stack === this.stack);
     }
-    get labelFormatValue() {
-        return labelFormats.find(f => f.value === this.stateService.state.valueAxis[0]?.labels?.format)?.value || defaultFormat.value;
+}
+ChartWizardSeriesTypeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardSeriesTypeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chartwizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
+        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
+            <div class="k-icon-background-area">
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
+            </div>
+            {{ title }}
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chartwizard-series-type-button',
+                    template: `
+        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
+            <div class="k-icon-background-area">
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
+            </div>
+            {{ title }}
+        </div>
+    `,
+                    standalone: true,
+                    imports: [SVGIconComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: StateService }]; }, propDecorators: { title: [{
+                type: Input
+            }], chartTypeIcon: [{
+                type: Input
+            }], stack: [{
+                type: Input
+            }], seriesType: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChartWizardPropertyPaneChartTabComponent {
+    constructor(stateService, cdr, localization) {
+        this.stateService = stateService;
+        this.cdr = cdr;
+        this.localization = localization;
+        this.exportIcon = exportIcon;
+        this.chartBarClusteredIcon = chartBarClusteredIcon;
+        this.chartBarStackedIcon = chartBarStackedIcon;
+        this.chartBarStacked100Icon = chartBarStacked100Icon;
+        this.chartPieIcon = chartPieIcon;
+        this.chartColumnClusteredIcon = chartColumnClusteredIcon;
+        this.chartColumnStackedIcon = chartColumnStackedIcon;
+        this.chartColumnStacked100Icon = chartColumnStacked100Icon;
+        this.chartLineIcon = chartLineIcon;
+        this.chartLineStackedIcon = chartLineStackedIcon;
+        this.chartLineStacked100Icon = chartLineStacked100Icon;
+        this.chartScatterIcon = chartScatterIcon;
     }
     ngAfterViewChecked() {
         this.localization.changes.subscribe(() => {
-            this.cdr.detectChanges();
+            this.detectChanges();
         });
     }
     ngOnDestroy() {
         this.localization.changes.unsubscribe();
     }
-    updateState(action, value) {
-        if (action === this.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
-            this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
-            return;
-        }
-        this.stateService.state = updateState(this.stateService.state, action, value);
-    }
-    changeCurrentTitle(value) {
-        this.stateService.currentTitle = value;
-    }
-    toggleSeriesLabels(value) {
-        this.updateCurrentSeries(this.stateService.currentSeries);
-        this.stateService.currentSeries.labels = { visible: value };
-        this.updateState(this.seriesLabel, this.stateService.currentSeries);
-    }
-    updateCurrentSeries(value) {
-        if (value.name === defaultAllSeriesItem.name) {
-            this.stateService.currentSeries = defaultAllSeriesItem;
-        }
-        else {
-            this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
-        }
-    }
-    updateSeriesColor(value) {
-        this.updateCurrentSeries(this.stateService.currentSeries);
-        this.stateService.currentSeries.color = value;
-        this.updateState(this.seriesColor, this.stateService.currentSeries);
+    detectChanges() {
+        this.cdr.detectChanges();
     }
 }
-ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Chart Area"
-                [expanded]="true"
-                [attr.dir]="stateService.direction"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Margins</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Left"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).left"
-                                (valueChange)="updateState(areaMarginLeft, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Right"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).right"
-                                (valueChange)="updateState(areaMarginRight, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Top"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).top"
-                                (valueChange)="updateState(areaMarginTop, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Bottom"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).bottom"
-                                (valueChange)="updateState(areaMarginBottom, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Background</legend>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="stateService.state.area?.background"
-                            (valueChange)="updateState(areaBackground, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Title"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Apply to"
-                            inputType="dropDownList"
-                            [data]="chartTitles"
-                            [colSpan]="2"
-                            [value]="stateService.currentTitle"
-                            (valueChange)="changeCurrentTitle($event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Title"
-                            inputType="text"
-                            [colSpan]="2"
-                            [value]="chartTitleTypeText"
-                            (valueChange)="updateState(chartTitleTypeAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Font"
-                            inputType="comboBox"
-                            [data]="fontNames"
-                            [colSpan]="2"
-                            [value]="chartTitleTypeFont"
-                            placeholder="(Inherited font)"
-                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Size"
-                            inputType="comboBox"
-                            placeholder="px"
-                            [data]="fontSizes"
-                            [value]="chartTitleTypeFontSize"
-                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="chartTitleTypeColor"
-                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </div>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Legend"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
-                        <kendo-switch
-                            #toggleLegend
-                            onLabel="On"
-                            offLabel="Off"
-                            thumbRounded="full"
-                            size="medium"
-                            [checked]="stateService.state.legend?.visible"
-                            (valueChange)="updateState(legendVisible, $event)"
-                        ></kendo-switch>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Font"
-                            inputType="comboBox"
-                            [data]="fontNames"
-                            [colSpan]="2"
-                            placeholder="(Inherited font)"
-                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
-                            (valueChange)="updateState(legendFontName, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Size"
-                            inputType="comboBox"
-                            [data]="fontSizes"
-                            placeholder="px"
-                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
-                            (valueChange)="updateState(legendFontSize, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="stateService.state.legend?.labels?.color"
-                            (valueChange)="updateState(legendColor, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Position"
-                            inputType="dropDownList"
-                            [colSpan]="2"
-                            [data]="legendPositions"
-                            [value]="stateService.state.legend?.position"
-                            (valueChange)="updateState(legendPosition, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </div>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Series"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-field">
-                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-dropdownlist
-                                #seriesDropDown
-                                [data]="seriesData"
-                                textField="name"
-                                valueField="name"
-                                fillMode="outline"
-                                rounded="medium"
-                                size="medium"
-                                [value]="stateService.currentSeries"
-                                (valueChange)="updateCurrentSeries($event)"
-                            ></kendo-dropdownlist>
-                        </div>
-                    </div>
-
-                    <kendo-chartwizard-property-pane-form-field
-                        text="Color"
-                        [value]="stateService.currentSeries?.color"
-                        inputType="colorPicker"
-                        [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
-                        (valueChange)="updateSeriesColor($event)"
-                    >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                        text="Show Labels"
-                        [value]="showLabels"
-                        [isLabelInsideFormFieldWrap]="true"
-                        inputType="checkbox"
-                        (valueChange)="toggleSeriesLabels($event)"
-                    >
-                    </kendo-chartwizard-property-pane-form-field>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Title</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                inputType="text"
-                                [hasLabel]="false"
-                                [colSpan]="2"
-                                placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
-                                (valueChange)="updateState(categoryAxisTitleText, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                [colSpan]="2"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
-                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                placeholder="px"
-                                [data]="fontSizes"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
-                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.title?.color"
-                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Labels</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
-                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                [data]="fontSizes"
-                                placeholder="px"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
-                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
-                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Rotation"
-                                inputType="dropDownList"
-                                [data]="labelsRotation"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
-                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <span></span>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Reverse Order"
-                                [isLabelInsideFormFieldWrap]="true"
-                                inputType="checkbox"
-                                [colSpan]="2"
-                                [value]="stateService.state.categoryAxis[0]?.reverse"
-                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Title</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                inputType="text"
-                                [hasLabel]="false"
-                                [colSpan]="2"
-                                placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
-                                (valueChange)="updateState(valueAxisTitleText, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [colSpan]="2"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
-                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                placeholder="px"
-                                [data]="fontSizes"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
-                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.title?.color"
-                                (valueChange)="updateState(valueAxisTitleColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Labels</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Label Format"
-                                [colSpan]="2"
-                                inputType="dropDownList"
-                                [data]="labelFormats"
-                                [value]="labelFormatValue"
-                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
-                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                [data]="fontSizes"
-                                placeholder="px"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
-                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
-                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Rotation"
-                                inputType="dropDownList"
-                                [data]="labelsRotation"
-                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
-                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chartwizard-property-pane-format-tab',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Chart Area"
-                [expanded]="true"
-                [attr.dir]="stateService.direction"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Margins</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Left"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).left"
-                                (valueChange)="updateState(areaMarginLeft, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Right"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).right"
-                                (valueChange)="updateState(areaMarginRight, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Top"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).top"
-                                (valueChange)="updateState(areaMarginTop, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Bottom"
-                                inputType="numeric"
-                                [value]="$any(stateService.state.area?.margin).bottom"
-                                (valueChange)="updateState(areaMarginBottom, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Background</legend>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="stateService.state.area?.background"
-                            (valueChange)="updateState(areaBackground, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Title"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Apply to"
-                            inputType="dropDownList"
-                            [data]="chartTitles"
-                            [colSpan]="2"
-                            [value]="stateService.currentTitle"
-                            (valueChange)="changeCurrentTitle($event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Title"
-                            inputType="text"
-                            [colSpan]="2"
-                            [value]="chartTitleTypeText"
-                            (valueChange)="updateState(chartTitleTypeAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Font"
-                            inputType="comboBox"
-                            [data]="fontNames"
-                            [colSpan]="2"
-                            [value]="chartTitleTypeFont"
-                            placeholder="(Inherited font)"
-                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Size"
-                            inputType="comboBox"
-                            placeholder="px"
-                            [data]="fontSizes"
-                            [value]="chartTitleTypeFontSize"
-                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="chartTitleTypeColor"
-                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </div>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Legend"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
-                        <kendo-switch
-                            #toggleLegend
-                            onLabel="On"
-                            offLabel="Off"
-                            thumbRounded="full"
-                            size="medium"
-                            [checked]="stateService.state.legend?.visible"
-                            (valueChange)="updateState(legendVisible, $event)"
-                        ></kendo-switch>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Font"
-                            inputType="comboBox"
-                            [data]="fontNames"
-                            [colSpan]="2"
-                            placeholder="(Inherited font)"
-                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
-                            (valueChange)="updateState(legendFontName, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Size"
-                            inputType="comboBox"
-                            [data]="fontSizes"
-                            placeholder="px"
-                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
-                            (valueChange)="updateState(legendFontSize, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Color"
-                            inputType="colorPicker"
-                            [value]="stateService.state.legend?.labels?.color"
-                            (valueChange)="updateState(legendColor, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                        <kendo-chartwizard-property-pane-form-field
-                            text="Position"
-                            inputType="dropDownList"
-                            [colSpan]="2"
-                            [data]="legendPositions"
-                            [value]="stateService.state.legend?.position"
-                            (valueChange)="updateState(legendPosition, $event)"
-                        >
-                        </kendo-chartwizard-property-pane-form-field>
-                    </div>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section>
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                title="Series"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <div class="k-form-field">
-                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-dropdownlist
-                                #seriesDropDown
-                                [data]="seriesData"
-                                textField="name"
-                                valueField="name"
-                                fillMode="outline"
-                                rounded="medium"
-                                size="medium"
-                                [value]="stateService.currentSeries"
-                                (valueChange)="updateCurrentSeries($event)"
-                            ></kendo-dropdownlist>
-                        </div>
-                    </div>
-
-                    <kendo-chartwizard-property-pane-form-field
-                        text="Color"
-                        [value]="stateService.currentSeries?.color"
-                        inputType="colorPicker"
-                        [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
-                        (valueChange)="updateSeriesColor($event)"
-                    >
-                    </kendo-chartwizard-property-pane-form-field>
-                    <kendo-chartwizard-property-pane-form-field
-                        text="Show Labels"
-                        [value]="showLabels"
-                        [isLabelInsideFormFieldWrap]="true"
-                        inputType="checkbox"
-                        (valueChange)="toggleSeriesLabels($event)"
-                    >
-                    </kendo-chartwizard-property-pane-form-field>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Title</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                inputType="text"
-                                [hasLabel]="false"
-                                [colSpan]="2"
-                                placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
-                                (valueChange)="updateState(categoryAxisTitleText, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                [colSpan]="2"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
-                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                placeholder="px"
-                                [data]="fontSizes"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
-                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.title?.color"
-                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Labels</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
-                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                [data]="fontSizes"
-                                placeholder="px"
-                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
-                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
-                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Rotation"
-                                inputType="dropDownList"
-                                [data]="labelsRotation"
-                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
-                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <span></span>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Reverse Order"
-                                [isLabelInsideFormFieldWrap]="true"
-                                inputType="checkbox"
-                                [colSpan]="2"
-                                [value]="stateService.state.categoryAxis[0]?.reverse"
-                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
-            <kendo-expansionpanel
-                [style.max-width.px]="576"
-                [title]="stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
-                [expanded]="true"
-            >
-                <form class="k-form k-form-md">
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Title</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                inputType="text"
-                                [hasLabel]="false"
-                                [colSpan]="2"
-                                placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
-                                (valueChange)="updateState(valueAxisTitleText, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [colSpan]="2"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
-                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                placeholder="px"
-                                [data]="fontSizes"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
-                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.title?.color"
-                                (valueChange)="updateState(valueAxisTitleColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                    <fieldset class="k-form-fieldset">
-                        <legend class="k-form-legend">Labels</legend>
-                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Label Format"
-                                [colSpan]="2"
-                                inputType="dropDownList"
-                                [data]="labelFormats"
-                                [value]="labelFormatValue"
-                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Font"
-                                inputType="comboBox"
-                                [data]="fontNames"
-                                placeholder="(Inherited font)"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
-                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Size"
-                                inputType="comboBox"
-                                [data]="fontSizes"
-                                placeholder="px"
-                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
-                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Color"
-                                inputType="colorPicker"
-                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
-                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                            <kendo-chartwizard-property-pane-form-field
-                                text="Rotation"
-                                inputType="dropDownList"
-                                [data]="labelsRotation"
-                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
-                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
-                            >
-                            </kendo-chartwizard-property-pane-form-field>
-                        </div>
-                    </fieldset>
-                </form>
-            </kendo-expansionpanel>
-        </section>
-    `,
-                    standalone: true,
-                    imports: [
-                        ExpansionPanelComponent,
-                        ChartWizardPropertyPaneFormFieldComponent,
-                        LabelComponent,
-                        SwitchComponent,
-                        DropDownListComponent,
-                        NgIf
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
-
-/**
- * @hidden
- */
-class ChartWizardPropertyPaneFormatTabComponent {
-    constructor(stateService, formBuilder) {
-        this.stateService = stateService;
-        this.formBuilder = formBuilder;
-        this.categoryAxisX = ActionTypes.categoryAxisX;
-        this.valueAxisY = ActionTypes.valueAxisY;
-        this.seriesChange = ActionTypes.seriesChange;
-        this.trashIcon = trashIcon;
-        this.plusIcon = plusIcon;
-        this.isCategorical = isCategorical;
-        this.formGroup = this.formBuilder.group({
-            name: null,
-        });
-    }
-    updateState(action, value) {
-        this.stateService.state = updateState(this.stateService.state, action, value);
-    }
-    createFormGroup(args) {
-        const item = args.isNew ? {} : args.dataItem;
-        this.formGroup = this.formBuilder.group({
-            name: item.name,
-        });
-        return this.formGroup;
-    }
-    addData() {
-        this.stateService.state.series.push(this.stateService.deletedSeries[0]);
-        this.stateService.deletedSeries.shift();
-        this.updateState(this.seriesChange, this.stateService.state.series);
-    }
-    removeData(event) {
-        this.stateService.deletedSeries.push(event.dataItem);
-        this.updateState(this.seriesChange, event.sender.data.data);
-    }
-    onRowReorder(grid) {
-        this.updateState(this.seriesChange, grid.data.data);
-    }
-    isDisabled(grid) {
-        return grid.data.data.length === this.stateService.state.initialSeries.length;
-    }
-}
-ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-data-tab", ngImport: i0, template: `
-        <kendo-expansionpanel title="Configuration" [expanded]="true">
-            <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                    <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
-                    </legend>
-                    <kendo-dropdownlist
-                        [data]="stateService.state.columns"
-                        [value]="stateService.state.categoryField"
-                        (valueChange)="updateState(categoryAxisX, $event)"
-                        fillMode="outline"
-                        rounded="medium"
-                        size="medium"
-                    >
-                    </kendo-dropdownlist>
-                </fieldset>
-                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
-                    <legend class="k-form-legend">Series</legend>
-                    <kendo-grid
-                        #grid
-                        [kendoGridReactiveEditing]="createFormGroup"
-                        [kendoGridBinding]="stateService.state.series"
-                        [rowReorderable]="true"
-                        (rowReorder)="onRowReorder(grid)"
-                        (remove)="removeData($event)"
-                    >
-                        <ng-template kendoGridToolbarTemplate>
-                            <button
-                                kendoButton
-                                type="button"
-                                [svgIcon]="plusIcon"
-                                fillMode="flat"
-                                rounded="medium"
-                                [disabled]="isDisabled(grid)"
-                                (click)="addData()"
-                            >
-                                ADD
-                            </button>
-                        </ng-template>
-                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
-                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
-                        <kendo-grid-command-column [width]="40">
-                            <ng-template kendoGridCellTemplate>
-                                <button
-                                    [svgIcon]="trashIcon"
-                                    kendoGridRemoveCommand
-                                    fillMode="flat"
-                                    rounded="medium"
-                                    [disabled]="stateService.state.series.length < 2"
-                                ></button>
-                            </ng-template>
-                        </kendo-grid-command-column>
-                    </kendo-grid>
-                </fieldset>
-                <fieldset
-                    class="k-form-fieldset"
-                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+ChartWizardPropertyPaneChartTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, deps: [{ token: StateService }, { token: i0.ChangeDetectorRef }, { token: i2$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneChartTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-chart-tab", ngImport: i0, template: `
+        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Bar"
+                    [chartTypeIcon]="chartBarClusteredIcon"
+                    seriesType="bar"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Bar"
+                    [chartTypeIcon]="chartBarStackedIcon"
+                    seriesType="bar"
+                    [stack]="true"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Stacked Bar"
+                    [chartTypeIcon]="chartBarStacked100Icon"
+                    seriesType="bar"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Pie"
+                    [chartTypeIcon]="chartPieIcon"
+                    seriesType="pie"
+                    [stack]="undefined"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Column Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Column"
+                    [chartTypeIcon]="chartColumnClusteredIcon"
+                    seriesType="column"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Column"
+                    [chartTypeIcon]="chartColumnStackedIcon"
+                    seriesType="column"
+                    [stack]="true"
                 >
-                    <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
-                    </legend>
-                    <kendo-dropdownlist
-                        [data]="stateService.state.columns"
-                        [value]="stateService.state.yField"
-                        (valueChange)="updateState(valueAxisY, $event)"
-                        fillMode="outline"
-                        rounded="medium"
-                        size="medium"
-                    >
-                    </kendo-dropdownlist>
-                </fieldset>
-            </form>
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Stacked Column"
+                    [chartTypeIcon]="chartColumnStacked100Icon"
+                    seriesType="column"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
         </kendo-expansionpanel>
-    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+        <kendo-expansionpanel title="Line Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Line"
+                    [chartTypeIcon]="chartLineIcon"
+                    seriesType="line"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Line"
+                    [chartTypeIcon]="chartLineStackedIcon"
+                    seriesType="line"
+                    [stack]="true"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Line Column"
+                    [chartTypeIcon]="chartLineStacked100Icon"
+                    seriesType="line"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Scatter"
+                    [chartTypeIcon]="chartScatterIcon"
+                    seriesType="scatter"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardSeriesTypeButtonComponent, selector: "kendo-chartwizard-series-type-button", inputs: ["title", "chartTypeIcon", "stack", "seriesType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-chartwizard-property-pane-data-tab',
+                    selector: 'kendo-chartwizard-property-pane-chart-tab',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <kendo-expansionpanel title="Configuration" [expanded]="true">
-            <form class="k-form k-form-md">
-                <fieldset class="k-form-fieldset">
-                    <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
-                    </legend>
-                    <kendo-dropdownlist
-                        [data]="stateService.state.columns"
-                        [value]="stateService.state.categoryField"
-                        (valueChange)="updateState(categoryAxisX, $event)"
-                        fillMode="outline"
-                        rounded="medium"
-                        size="medium"
-                    >
-                    </kendo-dropdownlist>
-                </fieldset>
-                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
-                    <legend class="k-form-legend">Series</legend>
-                    <kendo-grid
-                        #grid
-                        [kendoGridReactiveEditing]="createFormGroup"
-                        [kendoGridBinding]="stateService.state.series"
-                        [rowReorderable]="true"
-                        (rowReorder)="onRowReorder(grid)"
-                        (remove)="removeData($event)"
-                    >
-                        <ng-template kendoGridToolbarTemplate>
-                            <button
-                                kendoButton
-                                type="button"
-                                [svgIcon]="plusIcon"
-                                fillMode="flat"
-                                rounded="medium"
-                                [disabled]="isDisabled(grid)"
-                                (click)="addData()"
-                            >
-                                ADD
-                            </button>
-                        </ng-template>
-                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
-                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
-                        <kendo-grid-command-column [width]="40">
-                            <ng-template kendoGridCellTemplate>
-                                <button
-                                    [svgIcon]="trashIcon"
-                                    kendoGridRemoveCommand
-                                    fillMode="flat"
-                                    rounded="medium"
-                                    [disabled]="stateService.state.series.length < 2"
-                                ></button>
-                            </ng-template>
-                        </kendo-grid-command-column>
-                    </kendo-grid>
-                </fieldset>
-                <fieldset
-                    class="k-form-fieldset"
-                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Bar"
+                    [chartTypeIcon]="chartBarClusteredIcon"
+                    seriesType="bar"
+                    [stack]="false"
                 >
-                    <legend class="k-form-legend">
-                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
-                    </legend>
-                    <kendo-dropdownlist
-                        [data]="stateService.state.columns"
-                        [value]="stateService.state.yField"
-                        (valueChange)="updateState(valueAxisY, $event)"
-                        fillMode="outline"
-                        rounded="medium"
-                        size="medium"
-                    >
-                    </kendo-dropdownlist>
-                </fieldset>
-            </form>
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Bar"
+                    [chartTypeIcon]="chartBarStackedIcon"
+                    seriesType="bar"
+                    [stack]="true"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Stacked Bar"
+                    [chartTypeIcon]="chartBarStacked100Icon"
+                    seriesType="bar"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Pie"
+                    [chartTypeIcon]="chartPieIcon"
+                    seriesType="pie"
+                    [stack]="undefined"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Column Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Column"
+                    [chartTypeIcon]="chartColumnClusteredIcon"
+                    seriesType="column"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Column"
+                    [chartTypeIcon]="chartColumnStackedIcon"
+                    seriesType="column"
+                    [stack]="true"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Stacked Column"
+                    [chartTypeIcon]="chartColumnStacked100Icon"
+                    seriesType="column"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Line Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Line"
+                    [chartTypeIcon]="chartLineIcon"
+                    seriesType="line"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="Stacked Line"
+                    [chartTypeIcon]="chartLineStackedIcon"
+                    seriesType="line"
+                    [stack]="true"
+                >
+                </kendo-chartwizard-series-type-button>
+                <kendo-chartwizard-series-type-button
+                    title="100% Line Column"
+                    [chartTypeIcon]="chartLineStacked100Icon"
+                    seriesType="line"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
+            <div class="k-chart-types-wrapper">
+                <kendo-chartwizard-series-type-button
+                    title="Scatter"
+                    [chartTypeIcon]="chartScatterIcon"
+                    seriesType="scatter"
+                    [stack]="false"
+                >
+                </kendo-chartwizard-series-type-button>
+            </div>
         </kendo-expansionpanel>
     `,
                     standalone: true,
-                    imports: [
-                        ExpansionPanelComponent,
-                        DropDownListComponent,
-                        ValueTemplateDirective,
-                        NgIf,
-                        GridComponent,
-                        ReactiveEditingDirective,
-                        DataBindingDirective,
-                        ToolbarTemplateDirective,
-                        ButtonComponent,
-                        RowReorderColumnComponent,
-                        ColumnComponent,
-                        CommandColumnComponent,
-                        CellTemplateDirective,
-                        GridToolbarFocusableDirective,
-                        FocusableDirective,
-                        RemoveCommandDirective
-                    ]
+                    imports: [ExpansionPanelComponent, ChartWizardSeriesTypeButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: StateService }, { type: i2$1.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i0.ChangeDetectorRef }, { type: i2$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `export` event on the Chart Wizard.
+ */
+class ExportEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(chart, exportOptions) {
+        super();
+        this.chart = chart;
+        this.exportOptions = exportOptions;
+    }
+}
 
 /**
  * @hidden
  */
-class ChartWizardSeriesTypeButtonComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.stack = false;
+class ChartWizardPropertyPaneFormFieldComponent {
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+        this.colSpan = 1;
+        this.hasLabel = true;
+        this.isLabelInsideFormFieldWrap = false;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+        this.formField = true;
     }
-    onSelect() {
-        this.stateService.seriesType = this.seriesType;
-        this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
-        this.stateService.currentSeries = {};
-        if (this.stack) {
-            this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
-        }
+    get isColSpan2() {
+        return this.colSpan === 2;
     }
-    isSelected() {
-        if (this.stack?.type === '100%') {
-            return this.stack?.type === this.stateService.state.series[0]?.stack?.type;
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    ngAfterViewInit() {
+        if (this.hasLabel) {
+            this.label.for =
+                this.numericTextBox ||
+                    this.colorPicker ||
+                    this.dropDownList ||
+                    this.textBox ||
+                    this.comboBox ||
+                    this.checkBox;
         }
-        return (this.stateService.state.seriesType === this.seriesType &&
-            this.stateService.state.series[0]?.stack === this.stack);
     }
 }
-ChartWizardSeriesTypeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardSeriesTypeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chartwizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
-        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
-            <div class="k-icon-background-area">
-                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
-            </div>
-            {{ title }}
+ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i2$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox'" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+                placeholder="Auto"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                [disabled]="disabled"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox'"
+                class="k-checkbox-label"
+                [text]="text"
+            ></kendo-label>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-chartwizard-series-type-button',
+                    selector: 'kendo-chartwizard-property-pane-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
-            <div class="k-icon-background-area">
-                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="primary"> </kendo-svgicon>
-            </div>
-            {{ title }}
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap && inputType !== 'checkbox'" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType !== 'checkbox'"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+                placeholder="Auto"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                [disabled]="disabled"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap && inputType === 'checkbox'"
+                class="k-checkbox-label"
+                [text]="text"
+            ></kendo-label>
         </div>
     `,
                     standalone: true,
-                    imports: [SVGIconComponent]
+                    imports: [
+                        NgIf,
+                        LabelComponent,
+                        NumericTextBoxComponent,
+                        ColorPickerComponent,
+                        DropDownListComponent,
+                        ComboBoxComponent,
+                        TextBoxComponent,
+                        CheckBoxComponent
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: StateService }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i2$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentState: [{
                 type: Input
-            }], chartTypeIcon: [{
+            }], action: [{
                 type: Input
-            }], stack: [{
+            }], class: [{
                 type: Input
-            }], seriesType: [{
+            }], inputType: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
+            }], colSpan: [{
+                type: Input
+            }], hasLabel: [{
+                type: Input
+            }], isLabelInsideFormFieldWrap: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formField: [{
+                type: HostBinding,
+                args: ['class.k-form-field']
+            }], isColSpan2: [{
+                type: HostBinding,
+                args: ['class.k-col-span-2']
+            }], label: [{
+                type: ViewChild,
+                args: [LabelComponent]
+            }], numericTextBox: [{
+                type: ViewChild,
+                args: [NumericTextBoxComponent]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: [ColorPickerComponent]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: [DropDownListComponent]
+            }], textBox: [{
+                type: ViewChild,
+                args: [TextBoxComponent]
+            }], comboBox: [{
+                type: ViewChild,
+                args: [ComboBoxComponent]
+            }], checkBox: [{
+                type: ViewChild,
+                args: [CheckBoxComponent]
             }] } });
 
 /**
  * @hidden
  */
-class ChartWizardPropertyPaneChartTabComponent {
-    constructor(stateService, cdr, localization) {
-        this.stateService = stateService;
-        this.cdr = cdr;
-        this.localization = localization;
-        this.exportIcon = exportIcon;
-        this.chartBarClusteredIcon = chartBarClusteredIcon;
-        this.chartBarStackedIcon = chartBarStackedIcon;
-        this.chartBarStacked100Icon = chartBarStacked100Icon;
-        this.chartPieIcon = chartPieIcon;
-        this.chartColumnClusteredIcon = chartColumnClusteredIcon;
-        this.chartColumnStackedIcon = chartColumnStackedIcon;
-        this.chartColumnStacked100Icon = chartColumnStacked100Icon;
-        this.chartLineIcon = chartLineIcon;
-        this.chartLineStackedIcon = chartLineStackedIcon;
-        this.chartLineStacked100Icon = chartLineStacked100Icon;
-        this.chartScatterIcon = chartScatterIcon;
-    }
-    ngAfterViewChecked() {
-        this.localization.changes.subscribe(() => {
-            this.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.localization.changes.unsubscribe();
-    }
-    detectChanges() {
-        this.cdr.detectChanges();
-    }
-}
-ChartWizardPropertyPaneChartTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, deps: [{ token: StateService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneChartTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-chart-tab", ngImport: i0, template: `
-        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Bar"
-                    [chartTypeIcon]="chartBarClusteredIcon"
-                    seriesType="bar"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Bar"
-                    [chartTypeIcon]="chartBarStackedIcon"
-                    seriesType="bar"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Stacked Bar"
-                    [chartTypeIcon]="chartBarStacked100Icon"
-                    seriesType="bar"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Pie"
-                    [chartTypeIcon]="chartPieIcon"
-                    seriesType="pie"
-                    [stack]="undefined"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Column Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Column"
-                    [chartTypeIcon]="chartColumnClusteredIcon"
-                    seriesType="column"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Column"
-                    [chartTypeIcon]="chartColumnStackedIcon"
-                    seriesType="column"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Stacked Column"
-                    [chartTypeIcon]="chartColumnStacked100Icon"
-                    seriesType="column"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Line Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Line"
-                    [chartTypeIcon]="chartLineIcon"
-                    seriesType="line"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Line"
-                    [chartTypeIcon]="chartLineStackedIcon"
-                    seriesType="line"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Line Column"
-                    [chartTypeIcon]="chartLineStacked100Icon"
-                    seriesType="line"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Scatter"
-                    [chartTypeIcon]="chartScatterIcon"
-                    seriesType="scatter"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardSeriesTypeButtonComponent, selector: "kendo-chartwizard-series-type-button", inputs: ["title", "chartTypeIcon", "stack", "seriesType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chartwizard-property-pane-chart-tab',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Bar"
-                    [chartTypeIcon]="chartBarClusteredIcon"
-                    seriesType="bar"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Bar"
-                    [chartTypeIcon]="chartBarStackedIcon"
-                    seriesType="bar"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Stacked Bar"
-                    [chartTypeIcon]="chartBarStacked100Icon"
-                    seriesType="bar"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Pie"
-                    [chartTypeIcon]="chartPieIcon"
-                    seriesType="pie"
-                    [stack]="undefined"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Column Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Column"
-                    [chartTypeIcon]="chartColumnClusteredIcon"
-                    seriesType="column"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Column"
-                    [chartTypeIcon]="chartColumnStackedIcon"
-                    seriesType="column"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Stacked Column"
-                    [chartTypeIcon]="chartColumnStacked100Icon"
-                    seriesType="column"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Line Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Line"
-                    [chartTypeIcon]="chartLineIcon"
-                    seriesType="line"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="Stacked Line"
-                    [chartTypeIcon]="chartLineStackedIcon"
-                    seriesType="line"
-                    [stack]="true"
-                >
-                </kendo-chartwizard-series-type-button>
-                <kendo-chartwizard-series-type-button
-                    title="100% Line Column"
-                    [chartTypeIcon]="chartLineStacked100Icon"
-                    seriesType="line"
-                    [stack]="{ type: '100%' }"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
-        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
-            <div class="k-chart-types-wrapper">
-                <kendo-chartwizard-series-type-button
-                    title="Scatter"
-                    [chartTypeIcon]="chartScatterIcon"
-                    seriesType="scatter"
-                    [stack]="false"
-                >
-                </kendo-chartwizard-series-type-button>
-            </div>
-        </kendo-expansionpanel>
+class ChartWizardPropertyPaneFormatTabComponent {
+    constructor(stateService, localization, cdr) {
+        this.stateService = stateService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.chartTitles = [
+            { text: 'Chart Title', value: 'Chart Title' },
+            { text: 'Chart Subtitle', value: 'Chart Subtitle' },
+        ];
+        this.areaMarginLeft = ActionTypes.areaMarginLeft;
+        this.areaMarginRight = ActionTypes.areaMarginRight;
+        this.areaMarginTop = ActionTypes.areaMarginTop;
+        this.areaMarginBottom = ActionTypes.areaMarginBottom;
+        this.areaBackground = ActionTypes.areaBackground;
+        this.legendVisible = ActionTypes.legendVisible;
+        this.legendFontName = ActionTypes.legendFontName;
+        this.legendFontSize = ActionTypes.legendFontSize;
+        this.legendColor = ActionTypes.legendColor;
+        this.legendPosition = ActionTypes.legendPosition;
+        this.categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
+        this.categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
+        this.categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
+        this.categoryAxisTitleColor = ActionTypes.categoryAxisTitleColor;
+        this.categoryAxisLabelsFontName = ActionTypes.categoryAxisLabelsFontName;
+        this.categoryAxisLabelsFontSize = ActionTypes.categoryAxisLabelsFontSize;
+        this.categoryAxisLabelsColor = ActionTypes.categoryAxisLabelsColor;
+        this.categoryAxisLabelsRotation = ActionTypes.categoryAxisLabelsRotation;
+        this.categoryAxisReverseOrder = ActionTypes.categoryAxisReverseOrder;
+        this.valueAxisTitleText = ActionTypes.valueAxisTitleText;
+        this.valueAxisTitleFontName = ActionTypes.valueAxisTitleFontName;
+        this.valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
+        this.valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
+        this.valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
+        this.valueAxisLabelsFormat = ActionTypes.valueAxisLabelsFormat;
+        this.valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
+        this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
+        this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
+        this.parseFont = parseFont;
+        this.labelFormats = labelFormats;
+        this.defaultAllSeriesItem = defaultAllSeriesItem;
+        this.fontNames = fontNames;
+        this.fontSizes = fontSizes;
+        this.legendPositions = positions;
+        this.labelsRotation = rotations;
+    }
+    get chartTitleTypeText() {
+        return this.stateService.currentTitle === 'Chart Title'
+            ? this.stateService.state.title?.text
+            : this.stateService.state.subtitle?.text;
+    }
+    get chartTitleTypeFont() {
+        return this.stateService.currentTitle === 'Chart Title'
+            ? parseFont(this.stateService.state.title?.font).name
+            : parseFont(this.stateService.state.subtitle?.font).name;
+    }
+    get chartTitleTypeFontSize() {
+        return this.stateService.currentTitle === 'Chart Title'
+            ? parseFont(this.stateService.state.title?.font).size
+            : parseFont(this.stateService.state.subtitle?.font).size;
+    }
+    get chartTitleTypeColor() {
+        return this.stateService.currentTitle === 'Chart Title'
+            ? this.stateService.state.title?.color
+            : this.stateService.state.subtitle?.color;
+    }
+    get chartTitleTypeAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleText : ActionTypes.subtitleText;
+    }
+    get chartTitleTypeFontAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontName : ActionTypes.subtitleFontName;
+    }
+    get chartTitleTypeColorAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleColor : ActionTypes.subtitleColor;
+    }
+    get chartTitleTypeFontSizeAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? ActionTypes.titleFontSize : ActionTypes.subtitleFontSize;
+    }
+    get seriesData() {
+        return [defaultAllSeriesItem, ...this.stateService.state.series];
+    }
+    get showLabels() {
+        return this.stateService.currentSeries.name !== defaultAllSeriesItem.name ? this.stateService.state.series.find(s => s.name === this.stateService.currentSeries.name)?.labels?.visible : this.stateService.state.series.every(s => s.labels?.visible);
+    }
+    get labelFormatValue() {
+        return labelFormats.find(f => f.value === this.stateService.state.valueAxis[0]?.labels?.format)?.value || defaultFormat.value;
+    }
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    updateState(action, value) {
+        if (action === ActionTypes.seriesLabel && this.stateService.currentSeries.name === defaultAllSeriesItem.name) {
+            this.stateService.state = updateState(this.stateService.state, action, { name: '', all: true, visible: value.labels.visible });
+            return;
+        }
+        this.stateService.state = updateState(this.stateService.state, action, value);
+    }
+    changeCurrentTitle(value) {
+        this.stateService.currentTitle = value;
+    }
+    toggleSeriesLabels(value) {
+        this.updateCurrentSeries(this.stateService.currentSeries);
+        this.stateService.currentSeries.labels = { visible: value };
+        this.updateState(ActionTypes.seriesLabel, this.stateService.currentSeries);
+    }
+    updateCurrentSeries(value) {
+        if (value.name === defaultAllSeriesItem.name) {
+            this.stateService.currentSeries = defaultAllSeriesItem;
+        }
+        else {
+            this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
+        }
+    }
+    updateSeriesColor(value) {
+        this.updateCurrentSeries(this.stateService.currentSeries);
+        this.stateService.currentSeries.color = value;
+        this.updateState(ActionTypes.seriesColor, this.stateService.currentSeries);
+    }
+}
+ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: i2$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chartwizard-property-pane-format-tab", ngImport: i0, template: `
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Chart Area"
+                [expanded]="true"
+                [attr.dir]="stateService.direction"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Margins</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Left"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Right"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Top"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Bottom"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Background</legend>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Title"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Apply to"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Title"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            placeholder="(Inherited font)"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            placeholder="px"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Legend"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
+                        <kendo-switch
+                            #toggleLegend
+                            onLabel="On"
+                            offLabel="Off"
+                            thumbRounded="full"
+                            size="medium"
+                            [checked]="stateService.state.legend?.visible"
+                            (valueChange)="updateState(legendVisible, $event)"
+                        ></kendo-switch>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            placeholder="(Inherited font)"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            placeholder="px"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Position"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Series"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-field">
+                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="seriesData"
+                                textField="name"
+                                valueField="name"
+                                fillMode="outline"
+                                rounded="medium"
+                                size="medium"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <kendo-chartwizard-property-pane-form-field
+                        text="Color"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </kendo-chartwizard-property-pane-form-field>
+                    <kendo-chartwizard-property-pane-form-field
+                        text="Show Labels"
+                        [value]="showLabels"
+                        [isLabelInsideFormFieldWrap]="true"
+                        [colSpan]="2"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </kendo-chartwizard-property-pane-form-field>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <span></span>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Reverse Order"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Label Format"
+                                [colSpan]="2"
+                                inputType="dropDownList"
+                                [data]="labelFormats"
+                                [value]="labelFormatValue"
+                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chartwizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chartwizard-property-pane-format-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Chart Area"
+                [expanded]="true"
+                [attr.dir]="stateService.direction"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Margins</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Left"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Right"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Top"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Bottom"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Background</legend>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Title"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Apply to"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Title"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            placeholder="(Inherited font)"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            placeholder="px"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Legend"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
+                        <kendo-switch
+                            #toggleLegend
+                            onLabel="On"
+                            offLabel="Off"
+                            thumbRounded="full"
+                            size="medium"
+                            [checked]="stateService.state.legend?.visible"
+                            (valueChange)="updateState(legendVisible, $event)"
+                        ></kendo-switch>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            placeholder="(Inherited font)"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            placeholder="px"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                        <kendo-chartwizard-property-pane-form-field
+                            text="Position"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </kendo-chartwizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                title="Series"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-field">
+                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="seriesData"
+                                textField="name"
+                                valueField="name"
+                                fillMode="outline"
+                                rounded="medium"
+                                size="medium"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <kendo-chartwizard-property-pane-form-field
+                        text="Color"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        [disabled]="stateService.currentSeries.name === defaultAllSeriesItem.name"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </kendo-chartwizard-property-pane-form-field>
+                    <kendo-chartwizard-property-pane-form-field
+                        text="Show Labels"
+                        [value]="showLabels"
+                        [isLabelInsideFormFieldWrap]="true"
+                        [colSpan]="2"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </kendo-chartwizard-property-pane-form-field>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? 'X Axis' : 'Category axis'"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <span></span>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Reverse Order"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section *ngIf="stateService.state.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
+            <kendo-expansionpanel
+                [style.max-width.px]="576"
+                [title]="stateService.state.seriesType === 'scatter' ? 'Y Axis' : 'Value axis'"
+                [expanded]="true"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Label Format"
+                                [colSpan]="2"
+                                inputType="dropDownList"
+                                [data]="labelFormats"
+                                [value]="labelFormatValue"
+                                (valueChange)="updateState(valueAxisLabelsFormat, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                            <kendo-chartwizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chartwizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
     `,
                     standalone: true,
-                    imports: [ExpansionPanelComponent, ChartWizardSeriesTypeButtonComponent]
+                    imports: [
+                        ExpansionPanelComponent,
+                        ChartWizardPropertyPaneFormFieldComponent,
+                        LabelComponent,
+                        SwitchComponent,
+                        DropDownListComponent,
+                        NgIf
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: StateService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }]; } });
-
-/**
- * @hidden
- */
-class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * Arguments for the `export` event on the Chart Wizard.
- */
-class ExportEvent extends PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(chart, exportOptions) {
-        super();
-        this.chart = chart;
-        this.exportOptions = exportOptions;
-    }
-}
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i2$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the Kendo UI for Angular Chart Wizard component.
@@ -2429,21 +1994,22 @@ class ChartWizardComponent {
         this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
             this.stateService.direction = rtl ? 'rtl' : 'ltr';
         }));
+        this.stateService.dataTab = this.dataTab;
     }
     ngOnChanges(changes) {
-        if (changes['data']) {
+        if (changes['data'] && changes['data'].currentValue?.length > 0) {
             const data = changes['data'].currentValue;
             const clonedData = structuredClone(data);
             this.stateService.data = clonedData;
-            this.stateService.state = createState(clonedData, this.stateService.seriesType);
+            this.stateService.state = createState(clonedData, this.stateService.state.seriesType);
         }
-        if (changes['defaultState']) {
+        if (changes['defaultState'] && this.data?.length > 0) {
             const defaultState = changes['defaultState'].currentValue;
             if (defaultState.seriesType) {
-                this.stateService.seriesType = defaultState.seriesType;
-                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+                this.stateService.state.seriesType = defaultState.seriesType;
+                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.state.seriesType));
             }
-            this.stateService.currentSeries = {};
+            this.stateService.currentSeries = defaultAllSeriesItem;
             if (typeof defaultState.stack !== 'undefined') {
                 this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, defaultState.stack);
             }
@@ -2489,7 +2055,7 @@ class ChartWizardComponent {
         }
     }
 }
-ChartWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i2.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i2$1.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
 ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chartwizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         {
@@ -2497,7 +2063,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useValue: 'kendo.chartwizard',
         },
         StateService
-    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }, { propertyName: "dataTab", first: true, predicate: ChartWizardPropertyPaneDataTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoChartWizardLocalizedMessages
             i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
@@ -2524,8 +2090,8 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                             Export
                         </kendo-dropdownbutton>
                     </div>
-                    <div class="k-preview-pane-content">
-                        <kendo-chart [transitions]="false">
+                    <div class="k-preview-pane-content" [style.height]="'calc(100% - 50px)'">
+                        <kendo-chart [transitions]="false" [style.width.%]="100" [style.height.%]="100">
                             <kendo-chart-title
                                 [text]="stateService.state.title?.text"
                                 [font]="stateService.state.title?.font"
@@ -2591,40 +2157,6 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
-                            <kendo-chart-x-axis>
-                                <kendo-chart-x-axis-item
-                                    *ngFor="let axis of stateService.state.categoryAxis"
-                                    [categories]="axis.categories"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                    [reverse]="axis.reverse"
-                                >
-                                </kendo-chart-x-axis-item>
-                            </kendo-chart-x-axis>
-                            <kendo-chart-y-axis>
-                                <kendo-chart-y-axis-item
-                                    *ngFor="let axis of stateService.state.valueAxis"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                >
-                                </kendo-chart-y-axis-item>
-                            </kendo-chart-y-axis>
                             <kendo-chart-legend
                                 [visible]="stateService.state.legend?.visible"
                                 [position]="stateService.state.legend?.position"
@@ -2658,7 +2190,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-splitter>
             <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
         </kendo-window>
-    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: XAxisComponent, selector: "kendo-chart-x-axis" }, { kind: "component", type: XAxisItemComponent, selector: "kendo-chart-x-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: YAxisComponent, selector: "kendo-chart-y-axis" }, { kind: "component", type: YAxisItemComponent, selector: "kendo-chart-y-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chartwizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chartwizard-property-pane-format-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chartwizard-property-pane-data-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, decorators: [{
             type: Component,
             args: [{
@@ -2700,8 +2232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             Export
                         </kendo-dropdownbutton>
                     </div>
-                    <div class="k-preview-pane-content">
-                        <kendo-chart [transitions]="false">
+                    <div class="k-preview-pane-content" [style.height]="'calc(100% - 50px)'">
+                        <kendo-chart [transitions]="false" [style.width.%]="100" [style.height.%]="100">
                             <kendo-chart-title
                                 [text]="stateService.state.title?.text"
                                 [font]="stateService.state.title?.font"
@@ -2767,40 +2299,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
-                            <kendo-chart-x-axis>
-                                <kendo-chart-x-axis-item
-                                    *ngFor="let axis of stateService.state.categoryAxis"
-                                    [categories]="axis.categories"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                    [reverse]="axis.reverse"
-                                >
-                                </kendo-chart-x-axis-item>
-                            </kendo-chart-x-axis>
-                            <kendo-chart-y-axis>
-                                <kendo-chart-y-axis-item
-                                    *ngFor="let axis of stateService.state.valueAxis"
-                                    [title]="{
-                                        text: axis.title?.text,
-                                        font: axis.title?.font,
-                                        color: axis.title?.color
-                                    }"
-                                    [labels]="{
-                                        rotation: axis.labels?.rotation,
-                                        font: axis.labels?.font,
-                                        color: axis.labels?.color
-                                    }"
-                                >
-                                </kendo-chart-y-axis-item>
-                            </kendo-chart-y-axis>
                             <kendo-chart-legend
                                 [visible]="stateService.state.legend?.visible"
                                 [position]="stateService.state.legend?.position"
@@ -2867,7 +2365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         WatermarkOverlayComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: StateService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i2$1.LocalizationService }, { type: StateService }]; }, propDecorators: { data: [{
                 type: Input
             }], defaultState: [{
                 type: Input
@@ -2886,30 +2384,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], propertyPane: [{
                 type: ViewChild,
                 args: [ChartWizardPropertyPaneChartTabComponent]
+            }], dataTab: [{
+                type: ViewChild,
+                args: [ChartWizardPropertyPaneDataTabComponent]
             }] } });
 
-// TODO: Extract to kendo-charts
-/**
- * Maps data rows to the Chart Wizard data format.
- *
- * @returns collection that can be used as Chart Wizard.
- */
-function getWizardDataFromDataRows(dataRows) {
-    const result = [];
-    dataRows.forEach(item => {
-        const { dataItem, dataColumns } = item;
-        const row = [];
-        dataColumns.forEach(column => {
-            row.push({
-                field: column.title || column.field,
-                value: getter(column.field)(dataItem)
-            });
-        });
-        result.push(row);
-    });
-    return result;
-}
-// End: Extract to kendo-charts
+const getWizardDataFromDataRows = ChartWizardCommon.getWizardDataFromDataRows;
 
 /**
  * Maps the Grid selectedKeys to a more general DataRows type to be displayed in the Chart Wizard.