Basic how to do...

[FTOptions]

I am trying to change the font size for the bottom labels using
tChart1.Axes.Bottom.Labels.Font.Size = 4;
I can change the left labels, but not the bottom.

In xaml, how can the chart be sized and positioned within the container?

How can the axis titles be moved?

Thanks

[Sandra]

Hello FTOptions,

I am trying to change the font size for the bottom labels using tChart1.Axes.Bottom.Labels.Font.Size = 4;I can change the left labels, but not the bottom.

I use your code in last versions of TeeChartFor.Net and your problem doesn't appear for me, so, the size of labels of all axes, change form me using next code:

Code: Select all

  tChart1.Axes.Bottom.Labels.Font.Size = 14;
            tChart1.Axes.Left.Labels.Font.Size = 14;

In xaml, how can the chart be sized and positioned within the container?

The size and the position depends of the size of Window or container are you using in xaml,therefore, the size and position you want give to your chart, only must consider the size of Chart mustn't be more big as size of container or Window.

How can the axis titles be moved?

To move the axis titles you need move the axis, too, because, the title depends of axis. I suggest you some options to achieve change position of title:

Firts: Change the text align of Title of Axes as do in next lines of code:

Code: Select all

       private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);

            tChart1.Axes.Bottom.Labels.Font.Size = 14;
            tChart1.Axes.Left.Labels.Font.Size = 14;
            line.FillSampleValues();
            tChart1.Legend.Visible = false;
            //Vertical axis
            line.VertAxis = Steema.TeeChart.WPF.Styles.VerticalAxis.Both;
            tChart1.Axes.Left.Title.Visible = true;
            tChart1.Axes.Left.Title.Text = "Left Axis";
            tChart1.Axes.Left.Title.TextAlign = TextAlignment.Right;
            tChart1.Axes.Left.Title.Font.Size = 12;
            tChart1.Axes.Left.Title.Font.Bold = true; 
            
            tChart1.Axes.Right.Title.Visible = true;
            tChart1.Axes.Right.Title.Text = "Right Axis";
            tChart1.Axes.Right.Title.TextAlign = TextAlignment.Center;
            tChart1.Axes.Right.Title.Font.Color = Colors.Red;
            tChart1.Axes.Right.Title.Font.Size = 12;
            tChart1.Axes.Right.Title.Font.Bold = true; 

            //Horizontal axis 
            line.HorizAxis = Steema.TeeChart.WPF.Styles.HorizontalAxis.Both;

            tChart1.Axes.Top.Title.Visible = true;
            tChart1.Axes.Top.Title.Text = "Top Axis";
            tChart1.Axes.Top.Title.TextAlign = TextAlignment.Left;
            tChart1.Axes.Top.Title.Font.Color = Colors.Red;
            tChart1.Axes.Top.Title.Font.Size = 12;
            tChart1.Axes.Top.Title.Font.Bold = true; 

            tChart1.Axes.Bottom.Title.Visible = true;
            tChart1.Axes.Bottom.Title.Text = "Bottom Axis";
            tChart1.Axes.Bottom.Title.TextAlign = TextAlignment.Right;
            tChart1.Axes.Bottom.Title.Font.Size = 12;
            tChart1.Axes.Bottom.Title.Font.Bold = true; 

        }

Second: Draw directly in the wpf canvas and choose the position as you want the text is drawn. You can do something as next:

Code: Select all

   private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);

            tChart1.Axes.Bottom.Labels.Font.Size = 14;
            tChart1.Axes.Left.Labels.Font.Size = 14;
            line.FillSampleValues();
            tChart1.Legend.Visible =false;

            tChart1.AfterDraw +=new Steema.TeeChart.WPF.PaintChartEventHandler(tChart1_AfterDraw);
            BitmapSource bmp = tChart1.Chart.Bitmap(tChart1.Width, tChart1.Height);

        }
        private void tChart1_AfterDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
            tChart1.Panel.MarginBottom = (int)(tChart1.Axes.Bottom.MaxLabelsWidth() + tChart1.Panel.MarginBottom);
            double index = tChart1.Axes.Bottom.MaxLabelsWidth();
            g.Font.Color = Colors.Red;
            g.Font.Bold = true;
            g.TextAlign = TextAlignment.Left;
            g.TextOut(tChart1.Axes.Bottom.IAxisSize/2,tChart1.Axes.Left.IEndPos+tChart1.Panel.MarginBottom,"Bottom Text");

        }

I hope will helps.

Thanks,

[FTOptions]

I do not understand why my bottom axis font is not changing, the left is not a problem. Are there any dependencies that would prevent the font from changing? Something else I noticed, is that when I set the font size larger, the axis moves up to allow for the larger font, but the labels are always at size 8. Also, when I use a multi-line label for the bottom axis, the title position is not adjusted and labels are over-written by the title.

Is there some documentation describing best practices for layout? There is a lot of dead space by default and I would like to make the chart as large as possible within the container.

I will use your examples to adjust the chart size.

Thanks for your reply

[FTOptions]

I figured out my bottom axis issue. When I override the labels, the font size sticks at 8. When I remove the override, the font size changes. Here is how I was setting the labels in my test app:

for ( int i = 0; i <= 40; i += 5 )
{
tChart1.Axes.Bottom.Labels.Items.Add( i, string.Format( "{0}", ( i * 1.36 ).ToString( "0.00" ) ) );
}

It is a simple line series that I set the bottom axis to minmax of (0,40).

Ultimately, I want to set the bottom labels to 2 lines of text.

Thanks

[Sandra]

Hello FTOptions,
I have made as simple code, where I have changed the Size of Labels, I have added a custom Title using TextOut and I have actived the MultiLine property of Labels and works in my correct way using last version of TeeChartNet:

Code: Select all

  public MainWindow()
        {
            InitializeComponent();
            InitializeChart();
        }
        const int Fontsize1 = 15;
        private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
            tChart1.Axes.Left.Labels.Font.Size = 14;
            line.FillSampleValues(40);
            tChart1.Legend.Visible =false;
   
            tChart1.Axes.Bottom.Labels.Items.Clear();
            for (int i = 0; i < 40; i += 5)
            {
                tChart1.Axes.Bottom.Labels.Items.Add(i,  (i * 1.36).ToString("0.00"));       
            }
             //Change Size of Labels.
            foreach (Steema.TeeChart.WPF.AxisLabelItem LabelItems1 in tChart1.Axes.Bottom.Labels.Items)
            {
                LabelItems1.Font.Size = Fontsize1; 
            }

            tChart1.Panel.MarginUnits = Steema.TeeChart.WPF.PanelMarginUnits.Pixels;
            tChart1.Axes.Bottom.Labels.MultiLine = true;
            BitmapSource bmp = tChart1.Chart.Bitmap(tChart1.Width, tChart1.Height);
            tChart1.AfterDraw += new Steema.TeeChart.WPF.PaintChartEventHandler(tChart1_AfterDraw);
            BitmapSource bmp1 = tChart1.Chart.Bitmap(tChart1.Width, tChart1.Height);
        }
        private void tChart1_AfterDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
            g.ClearClipRegions();
            tChart1.Panel.MarginBottom = (int)(tChart1.Axes.Bottom.MaxLabelsWidth() + tChart1.Panel.MarginBottom + Fontsize1);
            g.Font.Size = Fontsize1;
            g.TextAlign = TextAlignment.Left;
            g.TextOut(tChart1.Axes.Bottom.IAxisSize / 2, tChart1.Axes.Left.IEndPos + tChart1.Axes.Bottom.MaxLabelsWidth(), "Bottom Text");

        }

Can you tell us if previous code works in your end.

Is there some documentation describing best practices for layout? There is a lot of dead space by default and I would like to make the chart as large as possible within the container.

As I have explained previously, the maximum size of chart depends of size of MainWindow, for example, if your MainWindow has height = 400 and width=300, you only can make the chart as maximum of the height and width of MainWindow of wpf project, therefore you need increase the MainWindow size, if you want chart taking more space.
If you want change the size of Chart you only need do next:

Code: Select all

tChart1.Height=X;
tChart1.Width =Y;

I hope will helps.
Thanks,

[FTOptions]

Test.png (58.65 KiB) Viewed 11978 times

Using your example, this is what I get. Initially, I do not see the bottom title and the labels are slightly hidden.
When I size the window, I get a crash.

A couple of things:
1 - I notice you explicitly set the font size for each label, why? Shouldn't it get set based on the Labels.Font.Size?
2 - Why doesn't the sizing/positioning/rendering engine determine when a lable has multilines and adjust accordingly.
I should not have to manually move the title. This sounds like a bug.
3 - My question about sizing has nothing to do with the size of the window. It is the size of the chart within the window.
I want to make the chart as large as possible within the given size. I have not been able to change the panel
size. Should chart attribute changes always be made in the beforedraw handler? This may be part of my frustration.
What is the proper practice?

Thanks

[Sandra]

Hello FTOptions,

1 - I notice you explicitly set the font size for each label, why? Shouldn't it get set based on the Labels.Font.Size?

You need change for each label size,so each custom label is independent object in the axes, therefore each custom label has its properties and it doesn't depend of properties of Labels of axes for example Axis.Labels.Font.Size based.

2 - Why doesn't the sizing/positioning/rendering engine determine when a lables has multilines and adjust accordingly.
I should not have to manually move the title. This sounds like a bug.

Ok. I have added your request in wish-list with number [TF02016420] to be consider it in future versions of TeeChartFor.Net.

3 - My question about sizing has nothing to do with the size of the window. It is the size of the chart within the window.
I want to make the chart as large as possible within the given size. I have not been able to change the panel
size. Should chart attribute changes always be made in the beforedraw handler? This may be part of my frustration.

When you create a wpf project in the work area you have a MainWindow and Grid, if you want do the tChart as large possible you need assign the height or width of window to tchart height or width. An option to achieve it is, revoming the grid of xaml code:

Code: Select all

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="484" Width="840" xmlns:my="clr-namespace:Steema.TeeChart.WPF;assembly=TeeChart.WPF" SizeToContent="WidthAndHeight">
 <Grid Height=" 484" Width="840">
    <my:TChart Height="371" Name="tChart1" Width="609" />

</Grid>
</Window>

And add tCharct directly in the MainWindow as do here:

Code: Select all

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="484" Width="840" xmlns:my="clr-namespace:Steema.TeeChart.WPF;assembly=TeeChart.WPF" SizeToContent="WidthAndHeight">
    <my:TChart Height="371" Name="tChart1" Width="609" />
</Window>

After doing it you can draw the chart as size you want without problems using beforeDraw and if you want ChangeSize, events as do in next example code:

Code: Select all

      private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
            tChart1.Axes.Left.Labels.Font.Size = 14;
            line.FillSampleValues(40);

            tChart1.Panel.MarginBottom = 8;
            tChart1.BeforeDraw += new Steema.TeeChart.WPF.PaintChartEventHandler(tChart1_BeforeDraw);
            BitmapSource bmp = tChart1.Chart.Bitmap(tChart1.Width, tChart1.Height);
            this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);
            BitmapSource bmp1 = tChart1.Chart.Bitmap(tChart1.Width, tChart1.Height);
        }

        void tChart1_BeforeDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
            
            tChart1.Width = this.Width;
            tChart1.Height = this.Height; 
        }

        void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
         
            tChart1.Width = this.Width;
            tChart1.Height = this.Height;   
        }

Can you please, tell us if previous code works as you want? If you have any problems please, let me know.

I hope will helps.

Thanks,

[Sandra]

Hello FTOptions,


After doing some test, we have considered the feature request number (TF02016420) isn't implemented. The reason, is that the automatically adjust of labels in the chart is only produced, when the labels are added in chart automatically, as you can see in next example of code:

Code: Select all

private void InitializeChart()
    {
        Random rnd = new Random();
        Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
        tChart1.Axes.Left.Labels.Font.Size = 14;
        tChart1.Legend.Visible = false;
        for (int i = 0; i < 40; i += 5)
        {
            line.Add(rnd.NextDouble(), (i * 1.36).ToString("0.00"));
        }
        tChart1.Axes.Bottom.Labels.MultiLine = true;
        tChart1.Axes.Bottom.Labels.Font.Size = Fontsize1;
        tChart1.Axes.Bottom.Title.Text = "Bottom Text";
        tChart1.Axes.Bottom.Title.Font.Size = Fontsize1;
    }

In the case labels are added manually, when you use e.g, tChart1.Axes.Bottom.Labels.items.Add(), these aren't drawn automatically and adjust of labels in the chart must be manual, as do in next simple code:

Code: Select all

 const int Fontsize1 = 15;
   private void InitializeChart()
    {
        Steema.TeeChart.WPF.Styles.Line line = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
        tChart1.Axes.Left.Labels.Font.Size = 14;
        line.FillSampleValues(40);
        tChart1.Legend.Visible = false;

        tChart1.Axes.Bottom.Labels.Items.Clear();
        for (int i = 0; i < 40; i += 5)
        {
            tChart1.Axes.Bottom.Labels.Items.Add(i, (i * 1.36).ToString("0.00"));
        }
        //Change Size of Labels.
        foreach (Steema.TeeChart.WPF.AxisLabelItem LabelItems1 in tChart1.Axes.Bottom.Labels.Items)
        {
            LabelItems1.Font.Size = Fontsize1;
        }

        tChart1.Panel.MarginUnits = Steema.TeeChart.WPF.PanelMarginUnits.Pixels;
        tChart1.Axes.Bottom.Labels.MultiLine = true;

        tChart1.Axes.Bottom.Title.AutoPosition = false;
        tChart1.Axes.Bottom.Title.Text = "Bottom Text";
        tChart1.Axes.Bottom.Title.Top = tChart1.Height - Fontsize1 * 2;
        tChart1.Axes.Bottom.Title.Left = tChart1.Width / 2 - Utils.Round(tChart1.Graphics3D.TextWidth(tChart1.Axes.Bottom.Title.Text) / 2);
        tChart1.Axes.Bottom.Title.Font.Size = Fontsize1;

        tChart1.Panel.MarginBottom = Fontsize1 * 3;
    }

Our conclusion is TeeChart works in correct way and the behavior,appears when the labels aren't drawn automatically, doesn't need be changed.

Thanks,