@progress/kendo-angular-chart-wizard 16.6.3-develop.1 → 16.7.0-develop.1

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

@@ -34,8 +34,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-chart-wizard',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1723027361,
-    version: '16.6.3-develop.1',
+    publishDate: 1723113566,
+    version: '16.7.0-develop.1',
     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',
 };
 
@@ -77,6 +77,7 @@ const fontNames = [
  * @hidden
  */
 const rotations = [
+    { text: 'Auto', value: 'auto' },
     { text: '0°', value: 0 },
     { text: '45°', value: 45 },
     { text: '90°', value: 90 },
@@ -123,10 +124,11 @@ const axesDefinitions = {
     ],
     pie: [
         { axisType: 'category', types: categoryTypes },
-        { axisType: 'value', types: valueTypes },
+        { axisType: 'value', types: valueTypes, count: 1 },
     ],
     scatter: [
-        { axisType: 'value', types: valueTypes, count: 2 }
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes }
     ]
 };
 const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
@@ -183,10 +185,11 @@ const emptyState = () => structuredClone({
     series: [],
     initialSeries: [],
     categoryAxis: [],
-    valueAxis: [{ labels: { visible: true } }],
+    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();
@@ -220,7 +223,7 @@ const categoryValueChartState = (data, seriesType, options) => {
             type: seriesType,
             data: valuesResult,
             stack: false,
-            labels: { visible: true },
+            labels: { visible: false },
             ...(seriesType === scatterType ? scatterSeries : {})
         });
     });
@@ -230,10 +233,10 @@ const categoryValueChartState = (data, seriesType, options) => {
         state.initialSeries = structuredClone(state.series);
     }
     if (categories.length) {
-        state.categoryAxis = [{ categories, labels: { visible: true } }];
+        state.categoryAxis = [{ categories, labels: { visible: true, rotation: 'auto' } }];
         state.categoryField = state.columns[catIndex];
     }
-    state.legend = { visible: true };
+    state.legend = { visible: true, position: 'bottom' };
     state.title = { text: null };
     state.subtitle = { text: null };
     return state;
@@ -293,6 +296,15 @@ const pieChartState = (data, seriesType, options) => {
     state.initialSeries = structuredClone(state.series);
     return state;
 };
+const hasValue = (value) => value !== undefined && value !== null;
+/**
+ * @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;
+};
 /**
  * @hidden
  */
@@ -362,7 +374,7 @@ const mergeStates = (state, newState) => {
             newState.series[i].labels = state.series[i].labels;
         }
     }
-    if (state.series.every(s => s.labels?.visible)) {
+    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;
@@ -492,9 +504,11 @@ const updateState = (currentState, action, value) => {
         case ActionTypes.categoryAxisLabelsColor:
             state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.categoryAxisLabelsRotation:
-            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        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;
@@ -530,14 +544,37 @@ const updateState = (currentState, action, value) => {
         case ActionTypes.valueAxisLabelsColor:
             state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
             return state;
-        case ActionTypes.valueAxisLabelsRotation:
-            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+        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;
     }
 };
 
+/**
+ * @hidden
+ */
+const defaultAllSeriesItem = { name: 'All Series' };
+/**
+ * @hidden
+ */
+const defaultFormat = {
+    value: '',
+    text: 'Text'
+};
+/**
+ * @hidden
+ */
+const labelFormats = [
+    defaultFormat,
+    { value: 'n0', text: 'Number' },
+    { value: 'c0', text: 'Currency' },
+    { value: 'p0', text: 'Percent' }
+];
+
 /**
  * @hidden
  */
@@ -553,7 +590,7 @@ class StateService {
         };
         this.seriesType = 'bar';
         this.currentTitle = 'Chart Title';
-        this.currentSeries = {};
+        this.currentSeries = defaultAllSeriesItem;
         this.data = [];
         this.deletedSeries = [];
         this.direction = 'ltr';
@@ -577,6 +614,7 @@ class ChartWizardPropertyPaneFormFieldComponent {
         this.colSpan = 1;
         this.hasLabel = true;
         this.isLabelInsideFormFieldWrap = false;
+        this.disabled = false;
         this.valueChange = new EventEmitter();
         this.formField = true;
     }
@@ -604,7 +642,7 @@ class ChartWizardPropertyPaneFormFieldComponent {
     }
 }
 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" }, 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: `
+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
@@ -625,6 +663,7 @@ ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -694,6 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 fillMode="outline"
                 rounded="medium"
                 [value]="value"
+                [disabled]="disabled"
                 (valueChange)="valueChange.emit($event)"
             ></kendo-colorpicker>
             <kendo-dropdownlist
@@ -771,6 +811,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], formField: [{
@@ -848,10 +890,13 @@ class ChartWizardPropertyPaneDataTabComponent {
         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;
@@ -889,6 +934,15 @@ class ChartWizardPropertyPaneDataTabComponent {
     get chartTitleTypeFontSizeAction() {
         return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.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();
@@ -898,6 +952,10 @@ class ChartWizardPropertyPaneDataTabComponent {
         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) {
@@ -909,29 +967,26 @@ class ChartWizardPropertyPaneDataTabComponent {
         this.updateState(this.seriesLabel, this.stateService.currentSeries);
     }
     updateCurrentSeries(value) {
-        this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
+        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);
     }
-    onExpandedChange(panel, expanded) {
-        expanded
-            ? (this.stateService.currentFormatExpansionPanel = panel)
-            : (this.stateService.currentFormatExpansionPanel = null);
-    }
-    isExpanded(panel) {
-        return this.stateService.currentFormatExpansionPanel === panel;
-    }
 }
 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]="isExpanded('Chart Area')"
-                (expandedChange)="onExpandedChange('Chart Area', $event)"
+                [expanded]="true"
                 [attr.dir]="stateService.direction"
             >
                 <form class="k-form k-form-md">
@@ -983,9 +1038,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Title"
-                [expanded]="isExpanded('Title')"
-                (expandedChange)="onExpandedChange('Title', $event)"
+                [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">
@@ -1038,9 +1093,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Legend"
-                [expanded]="isExpanded('Legend')"
-                (expandedChange)="onExpandedChange('Legend', $event)"
+                [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">
@@ -1095,9 +1150,9 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Series"
-                [expanded]="isExpanded('Series')"
-                (expandedChange)="onExpandedChange('Series', $event)"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <div class="k-form-field">
@@ -1105,7 +1160,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                         <div class="k-form-field-wrap">
                             <kendo-dropdownlist
                                 #seriesDropDown
-                                [data]="stateService.state.series"
+                                [data]="seriesData"
                                 textField="name"
                                 valueField="name"
                                 fillMode="outline"
@@ -1121,12 +1176,13 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                         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]="stateService.currentSeries.labels?.visible"
+                        [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
@@ -1135,11 +1191,11 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
-                title="Category axis"
-                [expanded]="isExpanded('Category Axis')"
-                (expandedChange)="onExpandedChange('Category Axis', $event)"
+                [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">
@@ -1150,7 +1206,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(categoryAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1233,11 +1289,11 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
-                title="Value axis"
-                [expanded]="isExpanded('Value Axis')"
-                (expandedChange)="onExpandedChange('Value Axis', $event)"
+                [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">
@@ -1248,7 +1304,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(valueAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1283,6 +1339,15 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                     <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"
@@ -1321,7 +1386,7 @@ ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minV
                 </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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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: [{
@@ -1330,9 +1395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Chart Area"
-                [expanded]="isExpanded('Chart Area')"
-                (expandedChange)="onExpandedChange('Chart Area', $event)"
+                [expanded]="true"
                 [attr.dir]="stateService.direction"
             >
                 <form class="k-form k-form-md">
@@ -1384,9 +1449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Title"
-                [expanded]="isExpanded('Title')"
-                (expandedChange)="onExpandedChange('Title', $event)"
+                [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">
@@ -1439,9 +1504,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Legend"
-                [expanded]="isExpanded('Legend')"
-                (expandedChange)="onExpandedChange('Legend', $event)"
+                [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">
@@ -1496,9 +1561,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </section>
         <section>
             <kendo-expansionpanel
+                [style.max-width.px]="576"
                 title="Series"
-                [expanded]="isExpanded('Series')"
-                (expandedChange)="onExpandedChange('Series', $event)"
+                [expanded]="true"
             >
                 <form class="k-form k-form-md">
                     <div class="k-form-field">
@@ -1506,7 +1571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         <div class="k-form-field-wrap">
                             <kendo-dropdownlist
                                 #seriesDropDown
-                                [data]="stateService.state.series"
+                                [data]="seriesData"
                                 textField="name"
                                 valueField="name"
                                 fillMode="outline"
@@ -1522,12 +1587,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         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]="stateService.currentSeries.labels?.visible"
+                        [value]="showLabels"
                         [isLabelInsideFormFieldWrap]="true"
                         inputType="checkbox"
                         (valueChange)="toggleSeriesLabels($event)"
@@ -1536,11 +1602,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-3">
             <kendo-expansionpanel
-                title="Category axis"
-                [expanded]="isExpanded('Category Axis')"
-                (expandedChange)="onExpandedChange('Category Axis', $event)"
+                [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">
@@ -1551,7 +1617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(categoryAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1634,11 +1700,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </form>
             </kendo-expansionpanel>
         </section>
-        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+        <section *ngIf="stateService.seriesType !== 'pie'" class="k-row-start-1 k-row-end-3 k-col-start-4">
             <kendo-expansionpanel
-                title="Value axis"
-                [expanded]="isExpanded('Value Axis')"
-                (expandedChange)="onExpandedChange('Value Axis', $event)"
+                [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">
@@ -1649,7 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                 [hasLabel]="false"
                                 [colSpan]="2"
                                 placeholder="Axis Title"
-                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                [value]="stateService.state.valueAxis[0]?.title?.text || null"
                                 (valueChange)="updateState(valueAxisTitleText, $event)"
                             >
                             </kendo-chartwizard-property-pane-form-field>
@@ -1684,6 +1750,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <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"
@@ -1729,7 +1804,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         ChartWizardPropertyPaneFormFieldComponent,
                         LabelComponent,
                         SwitchComponent,
-                        DropDownListComponent
+                        DropDownListComponent,
+                        NgIf
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
@@ -1793,7 +1869,6 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -1845,13 +1920,15 @@ ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ mi
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </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: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { 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 });
+    `, 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: [{
             type: Component,
             args: [{
@@ -1872,7 +1949,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         rounded="medium"
                         size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
                 <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
@@ -1924,8 +2000,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         [data]="stateService.state.columns"
                         [value]="stateService.state.yField"
                         (valueChange)="updateState(valueAxisY, $event)"
+                        fillMode="outline"
+                        rounded="medium"
+                        size="medium"
                     >
-                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
                     </kendo-dropdownlist>
                 </fieldset>
             </form>
@@ -2032,9 +2110,6 @@ class ChartWizardPropertyPaneChartTabComponent {
         this.chartLineStacked100Icon = chartLineStacked100Icon;
         this.chartScatterIcon = chartScatterIcon;
     }
-    isExpanded(type) {
-        return this.stateService.state.seriesType === type;
-    }
     ngAfterViewChecked() {
         this.localization.changes.subscribe(() => {
             this.detectChanges();
@@ -2049,7 +2124,7 @@ class ChartWizardPropertyPaneChartTabComponent {
 }
 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]="isExpanded('bar')">
+        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Bar"
@@ -2074,7 +2149,7 @@ ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ min
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Pie Chart" [expanded]="isExpanded('pie')">
+        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Pie"
@@ -2085,7 +2160,7 @@ ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ min
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Column Chart" [expanded]="isExpanded('column')">
+        <kendo-expansionpanel title="Column Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Column"
@@ -2110,7 +2185,7 @@ ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ min
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Line Chart" [expanded]="isExpanded('line')">
+        <kendo-expansionpanel title="Line Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Line"
@@ -2135,7 +2210,7 @@ ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ min
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Scatter Chart" [expanded]="isExpanded('scatter')">
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Scatter"
@@ -2153,7 +2228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-chartwizard-property-pane-chart-tab',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <kendo-expansionpanel title="Bar Chart" [expanded]="isExpanded('bar')">
+        <kendo-expansionpanel title="Bar Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Bar"
@@ -2178,7 +2253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Pie Chart" [expanded]="isExpanded('pie')">
+        <kendo-expansionpanel title="Pie Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Pie"
@@ -2189,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Column Chart" [expanded]="isExpanded('column')">
+        <kendo-expansionpanel title="Column Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Column"
@@ -2214,7 +2289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Line Chart" [expanded]="isExpanded('line')">
+        <kendo-expansionpanel title="Line Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Line"
@@ -2239,7 +2314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-chartwizard-series-type-button>
             </div>
         </kendo-expansionpanel>
-        <kendo-expansionpanel title="Scatter Chart" [expanded]="isExpanded('scatter')">
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="true">
             <div class="k-chart-types-wrapper">
                 <kendo-chartwizard-series-type-button
                     title="Scatter"
@@ -2476,7 +2551,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2492,9 +2567,10 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
-                                            color: axis.labels?.color
+                                            color: axis.labels?.color,
+                                            format: axis.labels?.format
                                         }"
                                     >
                                     </kendo-chart-value-axis-item>
@@ -2511,8 +2587,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -2526,7 +2601,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2543,7 +2618,7 @@ ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2652,7 +2727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2668,9 +2743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                             color: axis.title?.color
                                         }"
                                         [labels]="{
-                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            rotation: axis.labels?.rotation,
                                             font: axis.labels?.font,
-                                            color: axis.labels?.color
+                                            color: axis.labels?.color,
+                                            format: axis.labels?.format
                                         }"
                                     >
                                     </kendo-chart-value-axis-item>
@@ -2687,8 +2763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     [name]="series.name"
                                     [color]="series.color"
                                     [labels]="{ visible: series.labels?.visible }"
-                                    [xField]="series.xField"
-                                    [yField]="series.yField"
+                                    [width]="series.width"
                                 >
                                 </kendo-chart-series-item>
                             </kendo-chart-series>
@@ -2702,7 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"
@@ -2719,7 +2794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                         color: axis.title?.color
                                     }"
                                     [labels]="{
-                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        rotation: axis.labels?.rotation,
                                         font: axis.labels?.font,
                                         color: axis.labels?.color
                                     }"