Asked by:
Align X Axis labels to the left

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