I have a stacked bar chart that I want to use to emulate changes in activity. Say the chart spans 30 minutes. I want the stacks to show when each category changed activity and for how long. For example, Zone 4 Cell 10 might be active for 5 minutes, inactive for 10 minutes and then active again for 15 minutes. Zone 4 Cell 20 might have a very different activity timeline. All activities are known (eg "active", shown below as green). An example is shown below.

Is there a way to achieve this with the basic stack chart library available in Kendo React? If so, how should the data be structured to be able to achieve this?

When I add an Avatar component:

```

<Avatar></Avatar>

```

I get this error:

```

hot-reloader-client.js:163 [Fast Refresh] rebuilding
app-index.js:31 Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at Avatar (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/card/Avatar.js:23:84)
    at NoSSR (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr.js:29:11)
    at Suspense
    at LoadableComponent
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/appbar/AppBarSection.js:48:26)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/appbar/AppBar.js:55:26)
    at NoSSR (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr.js:29:11)
    at Suspense
    at LoadableComponent
    at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:57:64)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:337:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:347:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateFunctionComponentInDev @ react-dom.development.js:15848
mountLazyComponent @ react-dom.development.js:15616
beginWork$1 @ react-dom.development.js:17316
beginWork @ react-dom.development.js:25675
performUnitOfWork @ react-dom.development.js:24526
workLoopConcurrent @ react-dom.development.js:24512
renderRootConcurrent @ react-dom.development.js:24468
performConcurrentWorkOnRoot @ react-dom.development.js:23339
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:534
Show 1 more frame
Show less

```

How do I stop it?

Hi,
I am using kendo React Line chart in my project. When the line-chart data is close, the points will overlap, and the tooltip also will affect the user's selection of data. Do you have any good suggestions to solve this situation?
What I am currently thinking of is to filter the data by clicking on the legend, so that I can select points.

Looking forward to your reply, thanks in advance！

Y65b36 (forked) - StackBlitz

Regards,
Sunny Hu

Hi, i need to replace the minimise and restore icon. I tried using minimizeButton and restoreButton prop. but it seems the functionality doesnt work anymore. Is there a way to just change the icon without disrupting the functionality? Thanks in advance!

Here's the component.

https://www.telerik.com/kendo-react-ui/components/dialogs/window/

I am trying to implement the following and wondered if there is any documentation / examples for this: 

1. On a page display a grid for "selected products". 
2. When you click "add" you are shown a modal with another grid (data is products).
3. This grid has a checkbox column (https://www.telerik.com/kendo-react-ui/components/grid/selection/)
4. You can select one or more products and click save
5. The "selected products" grid within the page updates to show the additional selected products.

I'm wondering if there are examples of a grid integrated within a form modal. i.e. the form isn't editing the original data that is shown on the page, instead it is loading available products but I need to know what is selected to show this within the page. There are 2 data sources - the products that have been selected and the available products. 

I've used your basic instructions to set up a Data Grid. However, I get an error when I add KendoReact's <Grid> component.

How do I get rid of this error?

Warning: Prop `style` did not match. Server: "border-width:0" Client: "null"
    at div
    at div
    at Header (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/header/Header.js:47:47)
    at div
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/Grid.js:154:28)
    at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:19:72)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:337:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:347:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)

Looking forward to your reply, thanks in advance！

R22hph (forked) - StackBlitz