import * as React from "react";
import * as ReactDOM from "react-dom";
import { Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartLegend } from "@progress/kendo-react-charts";
import 'hammerjs';
const categories = [2002, 2003, 2004];
const series = [{
name: "India",
data: [3.907, 7.943, 7.848]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175]
}, {
name: "Germany",
data: [0.21, 0.375, 1.161]
}, {
name: "World",
data: [1.988, 2.733, 3.994]
}];
const areaData = [{
name: "World",
data: [3.988, 3.733, 3.994]
}, {
name: "Germany",
data: [2.21, 2.375, 2.161]
}, {
name: "Russian Federation",
data: [1.743, 1.295, 1.175]
}, {
name: "India",
data: [0.907, 0.943, 0.848]
}];
const pieData = [{
name: "India",
share: 0.24
}, {
name: "Russian Federation",
share: 0.26,
explode: true
}, {
name: "Germany",
share: 0.1
}, {
name: "World",
share: 0.4
}];
const ChartContainer = () => <>
<div className="row mb-3">
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Column Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Line Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{series.map((item, idx) => <ChartSeriesItem key={idx} type="line" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
</div>
<div className="row">
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Area Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{areaData.map((item, idx) => <ChartSeriesItem key={idx} type="area" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Pie Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartSeries>
<ChartSeriesItem type="pie" overlay={{
gradient: "sharpBevel"
}} tooltip={{
visible: true
}} data={pieData} categoryField="name" field="share" />
</ChartSeries>
</Chart>
</div>
</div>
</div>
</>;
ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));
1 Answer, 1 is accepted
0
Hi Tejas,
There are few options that we can suggest:
- Using Sortable: https://www.telerik.com/kendo-react-ui/components/sortable/
- Using Draggable & Droppable: https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/
- Using TileLayout: https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/
The TileLayout might be the best options, since it provides built-in option for repositioning and you can store the new state in the localStorage.
As a side note, here is an example with the TileLayout that temporary hides the content during repositioning (which might be needed with the Chart components):
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!