Custom Axis Label and Title display issues

[Rob W]

Hi

I am a relative beginner with Tee Chart and am programming in C# and using TeeChart Pro V 4.2019.3.15. for .NET. I am doing most of the chart manipulation programmatically, rather than using the VS designer.

My problem is with custom axes. I initially set-up a basic chart with 1 series using the left and bottom axis and it displayed fine. As I need to use stacked charts I then switched to using creating a couple of custom axis and transferred the initialization I had done for the left axis to these axis. I am 80% of the way there but the chart's stacked axes are not displayed as expected, see below.

ChartProb1.jpg (114.06 KiB) Viewed 19393 times

As you can see the labels are displayed in the default grey and I cannot get the axis caption to display in any colour! I have been trying since the end of last week at tweaking various attributes but nothing I do seems to effect the label and caption display.

My code loops through each custom axis I have created (I've checked there are only two defined) performing the following:

Axis objAxis = m_objChart.Axes.Custom[nTraceCount];

... set axis start/end position, visibility on, activate a series and associate it with this axes (all of which appear to be working)...

objAxis.Grid.Visible = true;
objAxis.Horizontal = false;
objAxis.Ticks.Color = Color.Black;
objAxis.MinorTicks.Color = Color.Black;
objAxis.Labels.Color = Color.Black;
objAxis.Title.Visible = true;
objAxis.Title.Color = Color.Black;
objAxis.Title.Caption = "Test Title";

So my questions are:

1) Is there something I need to do, beyond the setup required for a Left Axis, to allow the custom axis label defaults to be changed?
2) Why are neither of the custom axis title captions displayed?
3) Why is the chart clipping on the left-hand side - I have set the chart margins to 3% on all sides and the top, bottom and right margins appear to be correct.
4) Why are the custom axis lines not drawing?
5) The first and last grid lines for the Bottom Axis (Time) appear to have been omitted. I did not notice this when using a single series left/bottom axis chart. Is this because I am now using custom axis, and how do I get them back?
6) Is there an example of the programmatic setup of a stacked chart using custom axes you could link me to?

Any guidance you can give me will be greatly appreciated.

Many thanks in advance

Rob

[Christopher]

Hello Rob,

firstly, many apologies for the lateness of this reply.

Please find following an example of how to add and modify a custom axis - in this example the changes are performed in the button click event:

TeeChartPro_2019-04-23_08-56-28.png (22.31 KiB) Viewed 19371 times

Code: Select all

		public Form1()
		{
			InitializeComponent();
			InitializeChart();
		}

        Line _line = new Line();

        private void InitializeChart()
        {
            tChart1.Series.Add(_line);
            _line.FillSampleValues();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            var axis = new Axis(tChart1.Chart);
            axis.AxisPen.Visible = true;
            axis.AxisPen.Color = Color.Red;
            axis.Grid.Visible = true;
            axis.Grid.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
            axis.Grid.Color = Color.Red;
            axis.Labels.Font.Color = Color.Red;
            axis.Title.Font.Color = Color.Red;
            axis.Title.Text = "Custom Vertical Axis";
            axis.Title.Angle = 90;

            tChart1.Panel.MarginUnits = PanelMarginUnits.Pixels;
            tChart1.Panel.MarginLeft = 150;
            tChart1.Axes.Custom.Add(axis);

            _line.CustomVertAxis = axis;
        }

[Rob W]

Hi Christopher,

Many thanks for your reply. Your assistance is greatly appreciated and has helped me make progress with my charting project. As you can see below, I now have labels and titles visible and in the correct colour.

ChartProb2.jpg (142.32 KiB) Viewed 19356 times

However, there a few things I have not found out how to accomplish and also a couple of questions from your reply that I would like to discuss...

1) To get the colour of the labels to be black rather than grey I followed your example and set the font colour (as in the first code line below), which worked.

objAxis.Labels.Font.Color = Color.Black;
objAxis.Labels.Pen.Color = Color.Black;
objAxis.Labels.Color = Color.Black;

But what is the difference between changing the label colour using this attribute and the two methods I had tried originally (shown in the second and third code lines), apart from they fail to change the label colour. To me it would seem that any of these code lines should set the label colour but they don't, and it is not obvious what the second and third lines are changing.

2) I notice you set the LeftMargin "manually" in pixels. Is this a workaround for a bug in the setting margins as a percentage, which seems to fail on the left margin? Will the percentage setting be fixed in the next release? Is there a more generics workaround that will cope with different label lengths etc?

3) I cannot seem to get grid lines to display on the first and last label on any of the axes. I am expecting to see grid-lines at 384 and 399 on the upper chart, at 51.0 on the lower chart (I think the grid line at 49.0 is not displaying, but is being overdrawn by the custom axis line) and at 5.0 on the bottom axis (again, I believe the grid line at 0.0 is not being drawn, but overdrawn by the axis line). I think this is something to do with the Axis Min and Max values, but I have added code to explicitly set these limits to the values I want but cannot get the grid lines to display.

objAxis.Automatic = false;
if (i == 0)
objAxis.SetMinMax(384.0, 399.0);
else
objAxis.SetMinMax(49.0, 51.0);
objAxis.Grid.DrawEvery = 1;

Is there some other attribute that controls the display of the first and last grid line on an axis that must also be set?

4) I am also not seeing the label (49.0) on the lower chart custom axis at the origin. Does this require some additional attribute to be set to be displayed?

I am quite happy to read-up on these subjects if you can point me to a reference document that will cover these topics. The TeeChart_Pro_Net_Tutorials.chm file is useful for basic information but does not seem to have the depth to answer this level of questions.

As before, I will be grateful for any guidance you can give me.

Many thanks and Best Regards

Rob

[Christopher]

Hello Rob,

some code:

Code: Select all

        public Form1()
        {
            InitializeComponent();
            InitializeChart();
        }

        Line _line = new Line(), _line1 = new Line();

        private void InitializeChart()
        {
            tChart1.Series.Add(_line);
            tChart1.Series.Add(_line1);
            _line.FillSampleValues();
            _line1.FillSampleValues();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            var axis = new Axis(tChart1.Chart);
            axis.AxisPen.Visible = true;
            axis.AxisPen.Color = Color.Red;
            axis.Grid.Visible = true;
            axis.Grid.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
            axis.Grid.Color = Color.Red;

            axis.Labels.Font.Color = Color.Red;
            axis.Labels.Transparent = false;
            axis.Labels.Pen.Color = Color.Fuchsia;
            axis.Labels.Color = Color.LightBlue;
            axis.Title.Font.Color = Color.Red;
            axis.Title.Text = "Custom Vertical Axis";
            axis.Title.Angle = 90;

            var axis1 = new Axis(tChart1.Chart);
            axis1.AxisPen.Visible = true;
            axis1.AxisPen.Color = Color.Blue;
            axis1.Grid.Visible = true;
            axis1.Grid.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
            axis1.Grid.Color = Color.Blue;

            axis.StartEndPositionUnits = PositionUnits.Percent;
            axis.StartPosition = 0;
            axis.EndPosition = 48;

            axis1.StartEndPositionUnits = PositionUnits.Percent;
            axis1.StartPosition = 52;
            axis1.EndPosition = 100;

            tChart1.Panel.MarginUnits = PanelMarginUnits.Percent;
            tChart1.Panel.MarginLeft = 20;
            tChart1.Axes.Custom.Add(axis);
            tChart1.Axes.Custom.Add(axis1);

            _line.CustomVertAxis = axis;
            _line1.CustomVertAxis = axis1;
        }

and the result:

TeeChartPro_2019-04-29_19-49-00.png (34.8 KiB) Viewed 19348 times

1) when the Labels shape is set to opaque (Transparent=false) the effect of the Label Pen and Color can be seen
2) the left margin works as expected with MarginUnits set to Percent
3 & 4) all grid lines and labels are rendering as expected

If you have any futher questions, would you please be so kind as to accompany them with some code? In this way I can run code here and get back to you quicker with more precise answers!

[Rob W]

Hi Christopher,

Firstly, thanks for your illustration about the effects of the different label color methods and the code behind it. I now understand what each does and have solved that problem.

I am still struggling to achieve the effect that I am after where grid lines are drawn at the start and finish of each axis. To illustrate the problem I have taken your sample code from my last question and adapted it to try and produce the grid lines.

The modifications are:
Replace the random generation of a series with explicit values for repeatability and so any math needed to calculate the axis limits is not needed.
Call functions to set the axes limits to "integer" values, set the grid line increment so grid lines are displayed at least at these "integer" values (if not more frequently) and set the grid to be drawn at every label.

The code used is this..

Code: Select all

	public partial class TestChartPanel : UserControl
		{
		public TestChartPanel()
			{
			InitializeComponent();
			InitializeChart();
			}

		private void TestChartPanel_Load(object sender, EventArgs e)
			{
			var axis = new Axis(tChart1.Chart);
			axis.AxisPen.Visible = true;
			axis.AxisPen.Color = Color.Red;
			axis.Grid.Visible = true;
			axis.Grid.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
			axis.Grid.Color = Color.Red;

			axis.Labels.Font.Color = Color.Red;
			axis.Labels.Transparent = false;
			axis.Labels.Pen.Color = Color.Fuchsia;
			axis.Labels.Color = Color.LightBlue;
			axis.Title.Font.Color = Color.Red;
			axis.Title.Text = "Custom Vertical Axis";
			axis.Title.Angle = 90;

			var axis1 = new Axis();// tChart1.Chart);
			axis1.AxisPen.Visible = true;
			axis1.AxisPen.Color = Color.Blue;
			axis1.Grid.Visible = true;
			axis1.Grid.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
			axis1.Grid.Color = Color.Blue;

			axis.StartEndPositionUnits = PositionUnits.Percent;
			axis.StartPosition = 0;
			axis.EndPosition = 48;

			axis1.StartEndPositionUnits = PositionUnits.Percent;
			axis1.StartPosition = 52;
			axis1.EndPosition = 100;


			tChart1.Panel.MarginUnits = PanelMarginUnits.Percent;
			tChart1.Panel.MarginLeft = 10;
			tChart1.Axes.Custom.Add(axis);
			tChart1.Axes.Custom.Add(axis1);

			_line.CustomVertAxis = axis;
			_line1.CustomVertAxis = axis1;


			// call functions to some additions to axes to (hopefully) get the
			// grid to encompas all the series data points and draw grid line
			// at first and last labels on each axis
			tChart1.Axes.Bottom.Grid.Visible = true;
			TimeAxisAdditions();
			FreqAxisAdditions();
			VoltAxisAdditions();


			}


		float[] fTimeVals = 
			{
			0.0F, 0.5F, 1.0F, 1.5F, 2.0F,
			2.5F, 3.0F, 3.5F, 4.0F, 4.75F
			};

		float[] fFreqVals =
			{
			51.4F, 49.2F, 51.2F, 49.4F, 51.0F,
			49.6F, 50.8F, 49.8F, 50.6F, 50.0F
			};

		float[] fVoltsVals =
			{
			245.6F, 235.4F, 244.4F, 236.6F, 243.2F,
			237.8F, 242.0F, 239.0F, 240.8F, 240.2F
			};


		Line _line = new Line(), _line1 = new Line();

		private void InitializeChart()
			{
			tChart1.Series.Add(_line);
			tChart1.Series.Add(_line1);

			for (Int32 i = 0; i < 10; i++)
				{
				_line.Add(fTimeVals[i], fFreqVals[i]);
				_line1.Add(fTimeVals[i], fVoltsVals[i]);
				}
			}



		private void TimeAxisAdditions()
			{
			Axis objAxis = tChart1.Axes.Bottom;

			// try to get the grid to encompass all the series data points by
			// extending the maximum limits of the axis to next label
			objAxis.Automatic = false;
			objAxis.Increment = 0.5F;
			objAxis.Minimum = 0.0F;
			objAxis.Maximum = 5.0F;
			objAxis.MinimumRound = true;
			objAxis.MaximumRound = true;

			// get solid grid lines to draw at every label
			objAxis.Grid.Style = System.Drawing.Drawing2D.DashStyle.Solid;
			objAxis.Grid.DrawEvery = 1;

			return;
			}

		private void FreqAxisAdditions()
			{
			Axis objAxis = tChart1.Axes.Custom[0];

			// try to get the grid to encompass all the series data points by
			// extending the maximum limits of the axis to next label
			objAxis.Automatic = false;
			objAxis.Increment = 0.25F;
			objAxis.Minimum = 49.0F;
			objAxis.Maximum = 52.0F;
			objAxis.MinimumRound = true;
			objAxis.MaximumRound = true;

			// get solid grid lines to draw at every label
			objAxis.Grid.Style = System.Drawing.Drawing2D.DashStyle.Solid;
			objAxis.Grid.DrawEvery = 1;

			return;
			}

		private void VoltAxisAdditions()
			{
			Axis objAxis = tChart1.Axes.Custom[1];

			// try to get the grid to encompass all the series data points by
			// extending the maximum limits of the axis to next label
			objAxis.Automatic = false;
			objAxis.Increment = 1.0F;
			objAxis.Minimum = 235.0F;
			objAxis.Maximum = 246.0F;
			objAxis.MinimumRound = true;
			objAxis.MaximumRound = true;

			// get solid grid lines to draw at every label
			objAxis.Grid.Style = System.Drawing.Drawing2D.DashStyle.Solid;
			objAxis.Grid.DrawEvery = 1;

			return;
			}



		}

This results in the chart shown below:

ChartProb3.jpg (116.09 KiB) Viewed 19296 times

I was hoping to see horizontal grid lines at the 52 and 49 label position on the upper chart Y-axis, the 246 and 235 position on the lower chart Y-axis, and vertical grid lines at the 0 and 5 position on the bottom axis.

I guess my question is there any way to get grid lines to be drawn at the start and finish of each axis, and if not, is there any other way of accomplishing the effect I am after?

Again, many thanks for your help and patience!

Best Regards

Rob

[Christopher]

I guess my question is there any way to get grid lines to be drawn at the start and finish of each axis, and if not, is there any other way of accomplishing the effect I am after?

Well, you could try adding the following two lines to FreqAxisAdditions() and VoltAxisAdditions():

Code: Select all

            objAxis.MinimumOffset = 5;
            objAxis.MaximumOffset = 5;

Here this gives me the following:

TeeChartPro_2019-05-17_08-50-12.png (31.88 KiB) Viewed 19246 times