[Solved] How can i sync the time frame of two charts

[Fabrizio Paolo]

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>
    )
}

[Stefan]

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