Scrolling

[David]

Sometimes i want to fit quite a few Column Series into the chart, so eventually they are becoming crowded.

Is it possible to use fixed width for series, but enable scrolling?

[Vessy]

Hi David,

RadHtmlChart does not provide the desired functionality out-of-the-box, but you can achieve a similar behavior by setting big width to the control and wrapping it in a standard scrollable div element in a similar way:

<div style="width:600px; overflow-x:scroll">
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="2000px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Products 1" DataFieldY="valueField1">
                    <LabelsAppearance Visible="false">
                    </LabelsAppearance>
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="dataFieldX">
            </XAxis>
        </PlotArea>
        <Legend>
            <Appearance Visible="false"></Appearance>
        </Legend>
        <ChartTitle Text="Money Spent Per Product"></ChartTitle>
    </telerik:RadHtmlChart>
</div>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
}

protected DataTable GetData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("dataFieldX"));
    tbl.Columns.Add(new DataColumn("valueField1"));
    tbl.Columns.Add(new DataColumn("valueField2"));

    for (int i = 0; i < 50; i++)
    {
        tbl.Rows.Add(new object[] { i, i*2-i});
    }

    return tbl;
}

Another possible approach you can suggest you is to consider using the Data Navigation feature of the chart:
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/datanavigation/defaultcs.aspx


Regards,
Vessy
Progress Telerik

[David]

Understood

Thank you

[Vessy]

Hi,

You are welcome, David. Let us know should any further question on this matter occur.

Regards,
Vessy
Progress Telerik