Fabrizio Paolo
Top achievements
Rank 1
Rank 1
Fabrizio Paolo
asked on 27 Oct 2020, 10:29 AM
Hi,
I just want to know if it's possible to show the same time frame in two charts, this means that if the time frame of one chart is changed the second one update automatically.
I'll post here my code
const GraficoWFP = () => { return ( <div style={{ paddingLeft: "12,5%", paddingRight: "12,5%" }}> <div style={{ display: "inline-block", padding: "5px" }}> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 450, width: 500, cursor: "ew-resize" }} pannable={{ lock: "y" }} > <ChartTitle text="Afghanistan" /> <ChartLegend position="bottom" orientation="horizontal" /> <ChartTooltip shared={true} render={sharedTooltipRender} /> <ChartValueAxis> <ChartValueAxisItem title={{ text: "Rainfall (mm)" }} /> </ChartValueAxis> <ChartCategoryAxis> <ChartCategoryAxisItem categories={cat} crosshair={crosshair} axisCrossingValue={0 && cat.length} min={36} max={72} justified={!0} labels={{ content: (item) => { return labels[item.value] } }} /> <ChartCategoryAxisItem categories={totalMonths} justified={!1} min={12} max={24} /> </ChartCategoryAxis> <ChartSeries> {seriesBar.map((item, idx) => ( <ChartSeriesItem key={idx} type="column" tooltip={{ visible: true }} data={item.data} name={item.name} color={item.color} /> ))} </ChartSeries> </Chart> </div> </div> </div> <div style={{ display: "inline-block", padding: "5px" }}> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 450, width: 500, cursor: "ew-resize" }} pannable={{ lock: "y" }} > <ChartTitle text="Afghanistan" /> <ChartLegend position="bottom" orientation="horizontal" /> <ChartTooltip shared={true} render={sharedTooltipRender} /> <ChartValueAxis> <ChartValueAxisItem title={{ text: "Variation from Average" }} /> </ChartValueAxis> <ChartCategoryAxis > <ChartCategoryAxisItem categories={cat} crosshair={crosshair} axisCrossingValue={0 && cat.length} min={36} max={72} justified={!0} labels={{ content: (item) => { return labels[item.value] } }} /> <ChartCategoryAxisItem categories={totalMonths} justified={!1} min={12} max={24} /> </ChartCategoryAxis> <ChartSeries> {seriesLine.map((item, idx) => ( <ChartSeriesItem key={idx} type="line" tooltip={{ visible: true }} data={item.data} name={item.name} color={item.color} markers={{ size: 2 }} /> ))} </ChartSeries> </Chart> </div> </div> </div> </div> )}1 Answer, 1 is accepted
0
Hello, Fabrizio,
This can be done by binding both Charts to the same variable in the state that controls the timeframe.
If you share more details on how the time frames are determined I can provide more to the point suggestion.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.