Search code examples
c#asp.netchartsasp.net-charts

adjusting the font axes style and size in asp.net chart?


Does anyone know the properties that I need to change to decrease the font size of the axes numbers and change the font style? Also need to know how to add x and y labels.

<asp:Chart runat="server" ID="Chart1" Width="340px" Height="265px">
    <Series>
        <asp:Series Name="scatter" MarkerSize="4" ChartType="Point" Color="Green" MarkerStyle="Circle">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
            BackSecondaryColor="White" BackColor="LightGreen" ShadowColor="Transparent" BackGradientStyle="TopBottom">
            <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
                WallWidth="0" IsClustered="False" />
            <AxisY LineColor="64, 64, 64, 64">
                <LabelStyle Font="Trebuchet MS, 5pt" />
                <MajorGrid LineColor="64, 64, 64, 64" />
            </AxisY>
            <AxisX LineColor="64, 64, 64, 64">
                <LabelStyle Font="Arial, 3pt" />
                <MajorGrid LineColor="64, 64, 64, 64" />
            </AxisX>
        </asp:ChartArea>
    </ChartAreas>
    <Series>
        <asp:Series Name="Line" ChartType="Line" BorderWidth="3" 
            MarkerStyle="None" BorderColor="180, 26, 59, 105" Color="DarkBlue">
        </asp:Series>
    </Series>
</asp:Chart>

Solution

  • Take a look at the LabelStyle class.

    Axis.LabelStyle = new LabelStyle() { Font = new Font("Verdana", 7.5f) }
    

    For example to add an X axis with this LabelStyle you can do:

    Chart.ChartAreas["MyChart"].AxisX = new Axis { LabelStyle = new LabelStyle() { Font = new Font("Verdana", 7.5f) } }
    

    And setting label auto fit style to prevent label scaling may be useful too:

    Chart.ChartAreas.["MyChart"].AxisY.LabelAutoFitStyle = LabelAutoFitStyles.None;