How can i sync the time frame of two charts

2 posts, 0 answers
  1. Fabrizio Paolo
    Fabrizio Paolo avatar
    1 posts
    Member since:
    Oct 2020

    Posted 27 Oct 2020 Link to this post

    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>
        )
    }
  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 28 Oct 2020 Link to this post

    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/.

Back to Top