locked
Border barchart overflow RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User196874992 posted

    Hello, I'm using AjaxKitTools for BarChart and c# to fill the data. But the border of the BarChart it's overflow, I don't know how to control the Width of this.

    https://prntscr.com/11t2iau

    ASPX:

    <div class="center2" style="overflow:auto">
 <ajaxToolkit:BarChart ID="BarChart1" runat="server" 
    chartheight="350" BaseLineColor="#A156AB"
    ChartType="Column" ChartTitleColor="#0E426C" Visible = "false" 
    BackColor="Transparent"
    CategoryAxisLineColor="#D08AD9" ValueAxisLineColor="#D08AD9" 
    ></ajaxToolkit:BarChart>
</div>

    C#

    DataTable dt = GetData(query);

            string[] x = new string[dt.Rows.Count];
            decimal[] y = new decimal[dt.Rows.Count];
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                x[i] = dt.Rows[i][0].ToString();
                y[i] = Convert.ToInt32(dt.Rows[i][1]);
            }
            
            BarChart1.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = y, BarColor = "#088da5" });
            BarChart1.CategoriesAxis = string.Join(",", x);
            BarChart1.ChartTitle = string.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value);
            if (x.Length > 3)
            {
                BarChart1.ChartWidth = (x.Length * 100).ToString();
            }
            BarChart1.Visible = ddlCountries.SelectedItem.Value != "";

    Wednesday, April 21, 2021 2:38 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi EvansGxz,

    Well, it looks like you have reduced the size of your browser to see how the chart is displayed.

    In this case, there will indeed be such a problem.

    You need to know that in this Ajax BarChart, BarChart.Width and BarChart.ChartWidth are two different properties. By default, BarChart.Width is the same as the width of the browser. You can also set its size manually. And BarChart.ChartWidth has been set in the code:

    BarChart1.ChartWidth = (x.Length * 100).ToString();

    This means that the BarChart.ChartWidth increases as your data volume increases, and there will be a gap between the two without setting BarChart.Width. This results in the current effect.

    If you need to solve this problem, you only need to set these two properties to the same value. In addition, you also need to consider the small amount of data, just like this:

    if (x.Length > 3)
                {
                    BarChart1.ChartWidth = (x.Length * 100).ToString();
                }
                else {
                    BarChart1.ChartWidth = (x.Length * 150).ToString();
                }
                BarChart1.Width = int.Parse(BarChart1.ChartWidth);

    Best regards,

    Xudong Peng

    • Marked as answer by An0nym0u5User Tuesday, September 21, 2021 12:00 AM
    Thursday, April 22, 2021 3:47 AM