New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Logarithmic Axis

  • Demo Configurator
  • Axis type:Log
    Step (log base):10

A logarithmic axis is a special numeric axis that transforms the actual values by using a logarithmic function with a particular base. A logarithmic axis is useful for displaying values that cover different orders of magnitude because it lets large values display together with small values in a more condensed scale than the default linear axis. The feature is available since Q3 2014.

You can configure a logarithmic axis in RadHtmlChart by setting the Type property of the Axis to "Log". You can also control the base of the logarithm via the Step property (default value is 10).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.LogarithmicAxis.DefaultCS" %>

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

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="500px">
            <PlotArea>
                <XAxis Type="Log">
                    <TitleAppearance Text="Frequency (Hz)"></TitleAppearance>
                </XAxis>
                <Series>
                    <telerik:ScatterLineSeries DataFieldY="SoundPressureLevel" DataFieldX="Frequency" Name="20 phon">
                        <LineAppearance LineStyle="Smooth" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <MarkersAppearance Size="4" />
                    </telerik:ScatterLineSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Sound Pressure Level (dB)"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Equal-Loudness Contour">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>


    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListXAxisType" AutoPostBack="true"
                                Label="Axis type:" Size="Medium">
                            </qsf:DropDownList>

                            <qsf:DropDownList runat="server" ID="DropDownListAxisStep" AutoPostBack="true"
                                Label="Step (log base):" Size="Medium">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance