Line Chart y axis labels being cut off and how to format currency and Date

Thread is closed for posting
3 posts, 1 answers
  1. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 11 May 2012 Link to this post

    I've been trying all day without asking, but i give up.  If anybody can help me with this I would appreciate it.

    Here is how much chart looks.

    My chart

    There are the issues I need help with.

        The labels on the left I have figured how to format, however, they are being cut off.  How do I shift the everything right so the labels are there?
        The next issue is how do I actually format the data as currency itself? (300119,302519 I would like to be $300,119,$302,519)
        How do I actually format the date as a real date on the graph?  For example 5082012 should be 5/08/2012.
        Is there a way to hide the series labels? for example the $$$ and Date?

    Here is the code i'm using.  I might be weird but I prefer to do everything in behind code, so if there is a solution that way I would love it!  Hopefully this is easy!

    private void BindChart2()
            string[] ParamArgs = { "DealershipIdParam|DemoDealership" };
            DataTable ChartTable2 = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Total_Listing_Value", ParamArgs, "CarLot_Dealership_Total_Listing_Value");
            DataTable MinTable = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Min_Listing_Value", ParamArgs, "CarLot_Dealership_Min_Listing_Value");
            DataTable MaxTable = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Max_Listing_Value", ParamArgs, "CarLot_Dealership_Max_Listing_Value");

            RadChart2.DataSource = ChartTable2;
            RadChart2.PlotArea.XAxis.AxisLabel.Visible = true;
            RadChart2.PlotArea.YAxis.AxisLabel.Visible = true;
            RadChart2.PlotArea.XAxis.DataLabelsColumn = "Date";
            RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -45;
            string[] min = MinTable.Rows[0].ItemArray[0].ToString().Split('.');
            string[] max = MaxTable.Rows[0].ItemArray[0].ToString().Split('.');
            RadChart2.PlotArea.YAxis.MinValue = Convert.ToInt32(min[0]);
            RadChart2.PlotArea.YAxis.MaxValue = Convert.ToInt32(max[0]);
            RadChart2.PlotArea.YAxis.Step = 1000;
            RadChart2.PlotArea.YAxis.AutoScale = false;
            RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font("Verdana", 6, System.Drawing.FontStyle.Bold);
            RadChart2.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.Currency;
            //RadChart2.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Pixel(-400);
            //RadChart2.PlotArea.YAxis.AutoScale = true;
            //RadChart2.AutoLayout = true;

    <telerik:RadChart ID="RadChart2" runat="server" ChartImageFormat="Jpeg"
                      Skin="Metal" DefaultType="Line" Width="600px">
                      <Appearance Corners="Round, Round, Round, Round, 10">
                          <FillStyle FillType="Image">
                              <FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip">
                          <Border Color="111, 111, 111" />
                      <Legend Visible="False">
                          <Appearance Dimensions-Margins="16%, 3%, 1px, 1px"
                              Position-AlignedPosition="TopRight" Visible="False">
                              <ItemTextAppearance TextProperties-Color="Black">
                              <FillStyle MainColor="Transparent">
                              <Border Color="Transparent" />
                          <DataTable Visible="True">
                          <EmptySeriesMessage Visible="True">
                              <Appearance Visible="True">
                              <Appearance Color="Transparent" MajorTick-Color="174, 174, 174">
                                  <MajorGridLines Color="40, 255, 255, 255" PenStyle="Solid" />
                                  <TextAppearance TextProperties-Color="51, 51, 51">
                                  <TextBlock Text="Date">
                                      <Appearance TextProperties-Color="51, 51, 51">
                          <YAxis AutoScale="False" MaxValue="100" MinValue="0" Step="10">
                              <Appearance Color="Transparent" MajorTick-Color="174, 174, 174"
                                  MinorTick-Color="174, 174, 174">
                                  <MajorGridLines Color="40, 255, 255, 255" />
                                  <MinorGridLines Color="40, 255, 255, 255" />
                                  <TextAppearance TextProperties-Color="51, 51, 51">
                                  <TextBlock Text="$$$">
                                      <Appearance TextProperties-Color="51, 51, 51">
                          <Appearance Corners="Round, Round, Round, Round, 4">
                              <FillStyle FillType="Image">
                                  <FillSettings BackgroundImage="{plotarea}" ImageAlign="Top"
                                      ImageDrawMode="Flip" ImageFlip="FlipY">
                              <Border Color="174, 174, 174" Width="4" />
                          <Appearance Position-AlignedPosition="Top">
                              <FillStyle MainColor="Transparent">
                          <TextBlock Text="Total Listing Monetary Value">
                              <Appearance TextProperties-Font="Arial, 16pt">

    mysql produces

    $$$    Date
    300119    05082012
    302519    05092012
    302819    05102012
    305219    05112012

    i would prefer it to produce
    $$$    Date
    300119    05/08/2012
    302519    05/09/2012
    302819    05/10/2012
    305219    05/11/2012

  2. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 15 May 2012 Link to this post

  3. Answer
    Evgenia avatar
    1437 posts

    Posted 16 May 2012 Link to this post

    Hi Joshua,

     Onto your questions:

    1. You should set the AutoLayout property of the chart to true as it will automatically arrange the chart elements so that all of them are fully readable and visible. More information about it can be found in our help topic.
    2. You can set currency format to the series items labels with the use of ChartSeries.DefaultLabelValue property. The possible formats are any custom format strings as mentioned in 3.
    3. You can set custom format for Axis Labels of RadChart you should use ValueFormat property as it  automatically formats axis label values as Currency, Scientific, General, Number, Percent, ShortDate, ShortTime, LongDate, LongTime or None. Then you can set Custom Format Strings ( to the property CustomFormat. This is demonstrated in our demo with source code provided.
    4. You can hide the series names by setting their LegendDisplayMode property to Nothing.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top