BasicGroupChart.js

/*
  Use this for simple charts with the following type:
    - bar
    - column
    - area
    - line
*/

import * as React from 'react';
import { Chart, ChartTitle, ChartSubtitle, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartLegend, ChartLegendTitle, ChartTooltip, ChartAxisDefaults } from '@progress/kendo-react-charts';
import { IntlProvider } from "@progress/kendo-react-intl";
import 'hammerjs';
import { groupBy } from "@progress/kendo-data-query";
import { dateFormat } from '@insight/toolkit-react';

export const BasicGroupedChart = (props) => {

  //set variables from properties passed
  const chartType = props.chartType; // area, line, bar, column, etc
  const title = props.title; // chart title
  const subTitle = props.subTitle; //chart subtitle
  const data = props.data; //chart data
  const groupedByField = props.groupedByField;  //field used for legend keys
  const valueField = props.valueField;  // field for values (y axis)
  const categoryField = props.categoryField;  // field for categories (x axis)
  const valueFormat = props.valueFormat; // format for values in y axis (ex. c0 for currency no decimals and p for percent)
  const labelFormat = props.labelFormat;  // format for labels (ex c2 for currency with decimals, n0 for number, no decimals)
  const showLabels = props.showLabels;  //shows or hides value labels
  const categoryTitle =props.categoryTitle;  // title for the Category axis
  const legendPosition = props.legendPosition; //position of the legend, top, right, bottom, etc
  const legendTitle = props.legendTitle; //title of the legend
  const tooltipFormat = props.tooltipFormat;  // format for tooltip (ex "My tooltip {0:c}")
  const locale = props.locale; // culture local (ex. "en-GB")
  const showCategoryLabels = props.showCategoryLabels;  // show the category axis labels
  const legendVisible = props.legendVisible ?? true;
  const stacked = props.stacked ?? false;
  //const colorField = props.colorField ?? ""
  
  //alert("DATA = " + JSON.stringify(data));

  const series = groupBy(data, [
    {
      field: groupedByField,
    },
  ]);
  const mapSeries = (item, idx) => (
    <ChartSeriesItem
      key={idx}
      data={item.items}
      name={item.value}
      field={valueField}
      categoryField={categoryField}
      type={chartType}
      labels={{visible:showLabels, format: labelFormat}}
      stack={stacked}
      //colorField={colorField}
    />
  );
   return(
    <IntlProvider locale={locale}><Chart><ChartLegend visible={legendVisible} position={legendPosition}><ChartLegendTitle text={legendTitle}></ChartLegendTitle></ChartLegend><ChartTitle text={title} /><ChartSubtitle text={subTitle} /><ChartCategoryAxis><ChartCategoryAxisItem title={{text: categoryTitle}} labels={{visible: showCategoryLabels}} /></ChartCategoryAxis><ChartAxisDefaults
        labels={{
          format: valueFormat
        }}
      /><ChartTooltip format={tooltipFormat} /><ChartSeries>
        {series.map(mapSeries)}
        {/*props.series.map(s => <ChartSeriesItem name={s.name} data={s.data} key={s.name} type="area"/>)*/}
      </ChartSeries></Chart></IntlProvider>
  );
};



Component Used - <BasicGroupedChart
                          chartType="column"
                          title="Invoice Breakdown by Product Category"
                          subTitle=""
                          data={spendPeriod?.spend ? spendPeriod?.spend : ""}
                          categoryField="group"
                          valueField="value"
                          groupedByField="label"
                          categoryTitle=""
                          legendPosition="bottom"
                          legendTitle=""
                          legendVisible={false}
                          tooltipFormat="{0:c}"
                          showLabels={true}
                          valueFormat="c2"
                          labelFormat="c2"
                          locale={accountInfo?.locale}
                        ></BasicGroupedChart>Multi Select - 

import { DropDownList, MultiSelect } from "@progress/kendo-react-dropdowns";

                          <MultiSelect
                            data={productNameData}
                            textField="label"
                            dataItemKey="value"
                            value={productName}
                            name="msCategory"
                            placeholder="All"
                            onChange={handleProductNameChange}
                          />

    const handleProductNameChange = (event) => {
      setProductName(event.value);
      setProductNameObject([...event.value]);
      setProductNameLength(event.value.length)
    };
 
 
Created one dummy Project - 
https://stackblitz.com/edit/react-ab4fou-czgxv7?file=index.js
Multi select change, delete should not impact the chart.  
      
      
      
        
      
      
      
      
      
    
    
                        

CategoryDS: [{categoryId: 1, name: "Category-A"}, {categoryId: 2, name: "Category-B"}, {categoryId: 3, name: "Category-C"}], SubCategoryDS: [{SubCatId: 101, name: "CatA-SubCat1"}, {SubCatId: 102, name: "CatA-SubCat2"}, {SubCatId: 103, name: "CatB-SubCat1"}, {SubCatId: 104, name: "CatB-SubCat2"}, {SubCatId: 105, name: "CatC-SubCat1"}]

<MultiSelect
        data={subCategoryDS}
        value={subCategories}
        onChange={handleChange}
        style={{
          width: "300px",
        }}
        placeholder="Please select ..."
      />

let subcategoryDropdownList = document.getElementById(`subcategory-multi-dropdown`).parentElement.parentElement as unknown as MultiSelect;
  subcategoryDropdownList.data = subCategories; //trying this according to docs
  subcategoryDropdownList.value = subCategories; //trying this hailmary and pray

const [subCategories, setSubCategories] = React.useState([]);
setSubCategories((pv) => ({
  ...pv,
  { options }
  }));