[Solved] Scroll in a column chart

[Juan Maria]

I am using an evaluation version of RadControls for Metro/HTML and I am trying to create a chart that allow the user to scroll it with the finger, but I cannot figure out how to achive this.

Could anyone give a suggestion?.

Thanks

[Veli]

Hi Juan,

RadChart for Metro / HTML itself does not support scrolling, but you can initialize your chart in a wider container that its parent element. Thus, the parent element will be scrollable:

<!--RadChart is initialized in a container that is 1000px wide, while the
parent container is only 600px. Setting overflow:auto; will enable scrolling-->
<div style="width:600px; overflow:auto; padding-bottom: 20px">
    <div id="chart" style="width:1000px" data-win-control="Telerik.UI.RadChart" data-win-options="{
        dataSource: {
            transport: {
                read: {
                    url: '/data/spain-electricity.json',
                    dataType: 'json'
                }
            }
        },
        series: [
            { type: 'column', field: 'solar' },
            { type: 'column', field: 'hydro' },
            { type: 'column', field: 'wind' },
            { type: 'column', field: 'nuclear' }
        ],
        categoryAxis: {
            field: 'year'
        }
        }"></div>
</div>

Greetings,
Veli
the Telerik team

[Juan Maria]

Thanks, it worked!