This article continues with the second half of the unfinished article TeeChart pro. Net tutorial (2022): how to deal with advanced axis and legend operations.
Additional axis
TeeChart provides five axes associated with the data series: left, top, bottom, right, and depth. When you add a new series to the chart, you can define which axis the series should be related to (go to the series tab, general page). You can use the Axis Customdraw method to repeat any (or all) of the previous four axes anywhere on the chart. Note that this method copies your axis and does not add a new custom axis. example:
[C#.Net]
private void Form1_Load(object sender, System.EventArgs e)
Random Rnd = new Random();
tChart1.Aspect.View3D = false;
tChart1.Panel.Gradient.Visible = true;
for(int t = 0; t <= 20; ++t)
line1.Add(t, ((Rnd.Next(100)) + 1) - ((Rnd.Next(70)) + 1), Color.Red);
private void line1_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g)
int posAxis = 0;
if(tChart1.Axes.Left.Maximum > 0)
tChart1.Axes.Left.Draw(g.ChartXCenter - 10,g.ChartXCenter - 20,g.ChartXCenter,true);
posAxis = tChart1.Axes.Left.CalcYPosValue(10);
tChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, true);
[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim t As Integer
TChart1.Aspect.View3D = False
TChart1.Panel.Gradient.Visible = True
For t = 0 To 20
Line1.Add(t, ((Rnd() * 100) + 1) - ((Rnd() * 70) + 1), Color.Red)
Next
End Sub
Private Sub Line1_BeforeDrawValues(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles Line1.BeforeDrawValues
Dim posAxis As Integer
If TChart1.Axes.Left.Maximum > 0 Then
TChart1.Axes.Left.Draw(g.ChartXCenter - 10, g.ChartXCenter - 20, g.ChartXCenter, True)
posAxis = TChart1.Axes.Left.CalcYPosValue(10)
TChart1.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, True)
End If
End Sub The above example code will generate the following figure:
In this example, TeeChart will draw a new axis in the center of the chart, a horizontal axis and a vertical axis. When you scroll the chart (drag with the right mouse button), the new vertical axis will always remain in the center of the chart, and the new horizontal axis will move up and down with the vertical scroll. The new axis is an exact copy of the default axis.
Together with the PositionPercent and stretch attributes, you can float an infinite number of axes anywhere on the chart. Scrolling, scaling, and axis hit detection also apply to custom created axes. You can now create additional axes at design time with the TeeChart editor and at run time with a few lines of code:
TeeChart enables you to create custom axes at design time, enabling them to be saved in TeeChart's tee file format. To do this, open the chart editor and click the axes tab, then select the "+" button to add a custom axis. Then select the location tab and make sure the new custom axis is highlighted. The horizontal check box on this page allows you to define a new custom axis as horizontal or leave it as the default vertical axis. The rest of this page and other tabs in the axes page allow you to change the scale, increment, title, label, scale, minor scale, and position of a custom axis, as described above. To associate this new custom axis with the data series you want, select the series tab and go to the general page. The drop-down combo boxes "horizontal axis" and "vertical axis" will enable you to select a new custom axis according to whether you have defined it before. It is vertical or horizontal.
Via Code
[C#.Net]
private void Form1_Load(object sender, System.EventArgs e)
Line line1 = new Line();
Line line2 = new Line();
tChart1.Aspect.View3D = false;
tChart1.Panel.Gradient.Visible = true;
tChart1.Header.Text = "TeeChart Multiple Axes";
tChart1.Series.Add(line1);
tChart1.Series.Add(line2);
for(int t = 0; t <= 10; ++t)
line1.Add(Convert.ToDouble(t), Convert.ToDouble(10 + t), Color.Red);
if(t > 1)
line2.Add(Convert.ToDouble(t), Convert.ToDouble(t), Color.Green);
Axis leftAxis = tChart1.Axes.Left;
leftAxis.StartPosition = 0;
leftAxis.EndPosition = 50;
leftAxis.AxisPen.Color = Color.Red;
leftAxis.Title.Font.Color = Color.Red;
leftAxis.Title.Font.Bold = true;
leftAxis.Title.Text = "1st Left Axis";
// You are able to then position the new Axis in overall relation to the Chart
// by using the StartPosition and EndPosition properties.
//
// StartPosition=50
// EndPosition=100
//
// These figures are expressed as percentages of the Chart Rectangle with 0 (zero)
// (in the case of a vertical Axis) being Top. These properties can be applied to
// the Standard Axes to create completely partitioned 'SubCharts' within the Chart.
Axis axis1 = new Axis(false, false, tChart1.Chart);
tChart1.Axes.Custom.Add(axis1);
line2.CustomVertAxis = axis1;
axis1.StartPosition = 50;
axis1.EndPosition = 100;
axis1.AxisPen.Color = Color.Green;
axis1.Title.Font.Color = Color.Green;
axis1.Title.Font.Bold = true;
axis1.Title.Text = "Extra Axis";
axis1.PositionUnits= PositionUnits.Percent;
axis1.RelativePosition = 20;
[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim Line1 As New Steema.TeeChart.Styles.Line()
Dim Line2 As New Steema.TeeChart.Styles.Line()
Dim t As Integer
TChart1.Aspect.View3D = False
TChart1.Panel.Gradient.Visible = True
TChart1.Header.Text = "TeeChart Multiple Axes"
TChart1.Series.Add(Line1)
TChart1.Series.Add(Line2)
For t = 0 To 10
Line1.Add(t, 10 + t, Color.Red)
If (t > 1) Then
Line2.Add(t, t, Color.Green)
End If
Next
With TChart1.Axes.Left
.StartPosition = 0
.EndPosition = 50
.AxisPen.Color = Color.Red
.Title.Font.Color = Color.Red
.Title.Font.Bold = True
.Title.Text = "1st Left Axis"
End With
'You are able to then position the new Axis in overall relation to the Chart
'by using the StartPosition and EndPosition properties.
' StartPosition = 50
' EndPosition = 100
'These figures are expressed as percentages of the Chart Rectangle with 0 (zero)
'(in the case of a vertical Axis) being Top. These properties can be applied to
'the Standard Axes to create completely partitioned 'SubCharts' within the Chart.
Dim Axis1 As New Steema.TeeChart.Axis(False, False, TChart1.Chart)
TChart1.Axes.Custom.Add(Axis1)
Line2.CustomVertAxis = Axis1
Axis1.StartPosition = 50
Axis1.EndPosition = 100
Axis1.AxisPen.Color = Color.Green
Axis1.Title.Font.Color = Color.Green
Axis1.Title.Font.Bold = True
Axis1.Title.Text = "Extra Axis"
Axis1.PositionUnits.= PositionUnits.Percent;
Axis1.RelativePosition = 20
End Sub The coding example above will show the following chart:
The choice is infinite! We recommend being careful when using custom axes, because it's easy to start filling the screen with new axes and forget which axis to manage!
Axis events provide runtime flexibility to modify axis labels and present user interactivity on axis clicks.
Next, take an example of the OnClickAxis event.
[C#.Net]
private void tChart1_ClickAxis(object sender, System.Windows.Forms.MouseEventArgs e)
if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
MessageBox.Show("Clicked Bottom Axis at: " + line1.XScreenToValue(e.X));
[VB.Net]
Private Sub TChart1_ClickAxis(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles TChart1.ClickAxis
If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
MsgBox("Clicked Bottom Axis at: " & Line1.XScreenToValue(e.X))
End If
End Sub Allows you to modify axis labels. Next, let's take an example of the OnGetAxisLabel event.
[C#.Net]
private void button1_Click(object sender, System.EventArgs e)
bar1.FillSampleValues(20);
tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark;
private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)
if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
e.LabelText = "Period " + Convert.ToString(e.ValueIndex);
[VB.Net]
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Bar1.FillSampleValues(20)
TChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Mark
End Sub
Private Sub TChart1_GetAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetAxisLabelEventArgs) Handles TChart1.GetAxisLabel
If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
e.LabelText = "Period " & e.ValueIndex
End If
End Sub Lets you decide which axis labels should be displayed. The following is an example of the ongetnextaslabel event. You should use the e.Stop Boolean property to include / exclude axis labels.
[C#.Net]
private void Form1_Load(object sender, System.EventArgs e)
line1.FillSampleValues(20);
private void tChart1_GetNextAxisLabel(object sender, Steema.TeeChart.TChart.GetNextAxisLabelEventArgs e)
if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
e.Stop = false;
switch(e.LabelIndex)
case 0: e.LabelValue = 5; break;
case 1: e.LabelValue = 13; break;
case 2: e.LabelValue = 19; break;
default: e.Stop = true; break;
[VB.Net]
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Line1.FillSampleValues(20)
End Sub
Private Sub TChart1_GetNextAxisLabel(ByVal sender As Object, ByVal e As Steema.TeeChart.TChart.GetNextAxisLabelEventArgs) Handles TChart1.GetNextAxisLabel
If CType(sender, Steema.TeeChart.Axis) Is TChart1.Axes.Bottom Then
e.Stop = False
Select Case e.LabelIndex
Case 0 : e.LabelValue = 5
Case 1 : e.LabelValue = 13
Case 2 : e.LabelValue = 19
Case Else : e.Stop = True
End Select
End If
End Sub