locked
Align X Axis labels to the left RRS feed

  • Question

  • User1310055179 posted

    Hi,

    I am trying to left align the X axis labels in the below chart.

    Is there a way to do that?

    void MakeGanttChart(DataSet graphDataSet, string[] cols)
            {
                double xordinal = 0;
                string xlabel = String.Empty;
                double yplot1 = 0;
                double yplot2 = 0;
                DateTime yplot1Date;
                DateTime yplot2Date;
                List<Series> seriesList = new List<Series>();
                DateTime firstdate = convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[0][1].ToString());
                DateTime lastdate = convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[0][2].ToString());
                int dateAggType = RadioButtonListGantt.SelectedIndex;
     
                Chart1.Width = 1500;
                if (cols.Length > 2)
                {
                    for (int c2 = 0; c2 < graphDataSet.Tables[0].Rows.Count; c2++)
                    {//loop over dataset rows- each row is a task in the gantt chart. create series per each row
                        xlabel = graphDataSet.Tables[0].Rows[c2][0].ToString();
                        yplot1Date = convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[c2][1].ToString());
                        yplot2Date = convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[c2][2].ToString());
                        yplot1 = (double)yplot1Date.ToOADate();//start date;
                        yplot2 = (double)yplot2Date.ToOADate();//end date;
     
                        //check min/max dates values
                        if (yplot1Date < firstdate)
                        {
                            firstdate = yplot1Date;
                        }
                        if (yplot2Date > lastdate)
                        {
                            lastdate = yplot2Date;
                        }
     
                        //use a different series for each datapoint
                        Series seriesInstance = new Series();
                        seriesInstance.ChartType = SeriesChartType.RangeBar;
                        seriesInstance.YValuesPerPoint = 2;
                        seriesInstance.CustomProperties = "DrawSideBySide=false";
                        switch (dateAggType)
                        {
                            case 0://Days aggregation
                                xordinal = (double)c2;
                                seriesInstance.Points.AddXY(xordinal, yplot1, yplot2);
                                break;
                            case 1://Months aggregation
                                xordinal = c2;
                                seriesInstance.Points.AddXY(xordinal, yplot1Date, yplot2Date);
                                break;
                        }
     
                        seriesInstance.Points[0].ToolTip = "#AXISLABEL \nStart: " + convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[c2][1].ToString()).ToString("yyyy-MM-dd") + " \nEnd: " + convertFromQsoftDate_2Datetime(graphDataSet.Tables[0].Rows[c2][2].ToString()).ToString("yyyy-MM-dd") + " \n" + graphDataSet.Tables[0].Rows[c2][3].ToString() + "% Complete" + " \nWork Order No: " + graphDataSet.Tables[0].Rows[c2][4].ToString(); 
                        seriesInstance.Points[0].AxisLabel = xlabel;
                        double usage; 
                        double.TryParse(graphDataSet.Tables[0].Rows[c2][3].ToString(), out usage);
                        if (usage == 0)
                        {
                            seriesInstance.Color = Color.Gainsboro;
                        }
                        if (usage == 100)
                        {
                            seriesInstance.Color = Color.ForestGreen;
                        }
                        if (usage > 100)
                        {
                            seriesInstance.Color = Color.Orange;
                        }
                        if (usage < 100 && usage > 0)
                        {
                            seriesInstance.Color = Color.DarkGray;
                        }
                        
     
                        seriesList.Add(seriesInstance);
                    }
     
                    
                    Series s = Chart1.Series[0];
                    Chart1.Series.Remove(s);
     
                    //double todyD = (double)DateTime.Today.ToOADate();
                    //s.Points.AddY(todyD);
     
                    foreach (Series plotSeries in seriesList)
                    {
                        Chart1.Series.Add(plotSeries);
                    }
     
     
                    double todyD = (double)DateTime.Today.ToOADate();
                    double lineHeight = todyD;
                    VerticalLineAnnotation ann = new VerticalLineAnnotation();
                    ann.AxisX = Chart1.ChartAreas[0].AxisX;
                    ann.AxisY = Chart1.ChartAreas[0].AxisY;
                    ann.IsSizeAlwaysRelative = false;
                    ann.AnchorX = lineHeight;
                    ann.IsInfinitive = true;
                    ann.ToolTip = "Today";
                    ann.ClipToChartArea = Chart1.ChartAreas[0].Name; ann.LineColor = Color.Red; ann.LineWidth = 3;
                    Chart1.Annotations.Add(ann);
     
                    Chart1.ChartAreas[0].AxisX.Interval = 1;
                   
                    Chart1.ChartAreas[0].AxisX.IsReversed = true;
                    
                    //other y axis properties
                    Chart1.ChartAreas[0].AxisY.IsStartedFromZero = false;
                    Chart1.ChartAreas[0].AxisY.IsMarginVisible = false;
                    
                    CalendarExtenderStart.StartDate = firstdate.AddDays(-1);
                    CalendarExtenderStart.EndDate = lastdate.AddDays(+1);
                    
     
                    CalendarExtenderEnd.StartDate = firstdate.AddDays(-1);
                    CalendarExtenderEnd.EndDate = lastdate.AddDays(+1);
                    if (!IsPostBack)
                    {
                        CalendarExtenderStart.SelectedDate = firstdate.AddDays(-1);
                        CalendarExtenderEnd.SelectedDate = lastdate.AddDays(+1);
                        TextBoxStartDate.Text = firstdate.AddDays(-1).ToString("yyyy-MM-dd");
                        TextBoxEndDate.Text = lastdate.AddDays(+1).ToString("yyyy-MM-dd");
                    }
     
                   
                    Chart1.ChartAreas[0].AxisY.Minimum = Convert.ToDateTime(TextBoxStartDate.Text).ToOADate();
                    Chart1.ChartAreas[0].AxisY.Maximum = Convert.ToDateTime(TextBoxEndDate.Text).ToOADate();
     
                    
                    double noOfXAxisLabels = 0; 
                    //set the y axis labels
                    switch (dateAggType)
                    {
                        case 0://Days aggregation
                            Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "yyyy-MM-dd"//day view
                            Chart1.ChartAreas[0].AxisY.IntervalType = DateTimeIntervalType.Days;
                            noOfXAxisLabels = (Convert.ToDateTime(TextBoxEndDate.Text) - Convert.ToDateTime(TextBoxStartDate.Text)).TotalDays;
                            break;
                        case 1://Months aggregation
                            Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "yyyy-MM"//month view
                            Chart1.ChartAreas[0].AxisY.IntervalType = DateTimeIntervalType.Months;
                            noOfXAxisLabels = ((Convert.ToDateTime(TextBoxEndDate.Text).Year - Convert.ToDateTime(TextBoxStartDate.Text).Year) * 12) + Convert.ToDateTime(TextBoxEndDate.Text).Month - Convert.ToDateTime(TextBoxStartDate.Text).Month;
                            break;
                    }
     
                    if (CheckBoxAutofit.Checked)
                    {
                        Chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;
                        //Chart1.Style.Add("width", "100%");
                        Chart1.Width = Screen.PrimaryScreen.Bounds.Width - 220; 
                    }
                    else
                    {
                        Chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;
                        //Chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.FixedCount;
                        //Chart1.ChartAreas[0].AxisY.Interval = 1;
                        int GanttWidth = (int)Math.Ceiling(noOfXAxisLabels) * 20;
     
                        if (GanttWidth < Screen.PrimaryScreen.Bounds.Width - 300)
                        {
                            GanttWidth = Screen.PrimaryScreen.Bounds.Width - 300;
                        }
                        Chart1.Style.Add("width""auto");
                        Chart1.Width = GanttWidth;
                    }
                    
                    int GanttHeight = graphDataSet.Tables[0].Rows.Count * 30 + 15;
     
                    if (GanttHeight < 150)
                    {
                        GanttHeight = 150;
                    }
                    Chart1.Height = GanttHeight;
     
                    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
                }
            }
    Monday, July 6, 2020 8:22 AM

All replies

  • User-939850651 posted

    Hi qsoft_developer,

    I found it possible to set the alignment property of the X-axis label in Gantt. I am not sure if this is what you are looking for.

    Just like below code, more details, you could refer to this document

    Highcharts.chart({
                ......
                tooltip: { ...}
                xAxis: [{
                    labels: {
                        align: left
                        autoRotation: [-45]
                        autoRotationLimit: 80
                        distance: 15
                        enabled: true
                        ......
                    }]
                });

    Best regards,

    Xudong Peng

    Tuesday, July 7, 2020 6:02 AM