HtmlChart - Responsive Chart

Resize the browser to resize the chart container. The chart will change its size. You can see the details in the scripts.js file.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Generally a chart is static - it has a given size which doesn't change together with the browser window, program window, etc. This is so because visualized data may not look well or even would look distorted if each change in the browser viewport or page layout affects the dimensions of the chart.

To deliver best user experience across all browsers and devices, RadHtmlChart, however, provides responsive layout capabilities. This ensures that the chart will be rendered appropriately either on small or large screens.

This demo shows one way to redraw the chart when the browser window size changes. You can see the details in the markup and in the scripts.js file. For demonstration purposes, only the chart width is set in percent, but its height can also be set in percent, as long as all its parent HTML elements have certain dimensions set.

  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        Resize the browser to resize the chart container.
        The chart will change its size. You can see the details in the scripts.js file.
    </qsf:MessageBox>
    <div class="demo-container">
        <telerik:RadHtmlChart runat="server" ID="BarChart" Height="300px" Width="100%">
        <ClientEvents OnLoad="chartLoad" />
            <PlotArea>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="Item 1"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Item 2"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Item 3"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <Series>
                    <telerik:BarSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="25"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="-12"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:BarSeries>
                    <telerik:BarSeries Name="Series 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="-15"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="38"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="-11"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:BarSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?