Nevron Forum

How to make X-axis from 2 Charts symmetric?

https://www.nevron.com/Forum/Topic9195.aspx

By Hans Henrik Friis Pedersen - Friday, June 5, 2015

Hi,

In the attached graph you can see three bar graphs. How do I make the top and bottom chart (in the code, this is chart1 and chart3) have X-axis that are symmetric or aligned? The problem is that when I add a Y-axis title to chart1; then the X-axis of the two charts are no longer symmetric...??

I have tried to use:

anchor2.BeginPercent = 20;

but this only moves the X-axis of chart3 and not the Yaxis of chart3:


private void Form1_Load(object sender, EventArgs e)
        {
 
            // configure interactivity
            NDataZoomTool m_DataZoomTool = new NDataZoomTool();
            m_DataZoomTool.AlwaysZoomIn = false;
 
            NAxisScrollTool m_AxisScrollTool = new NAxisScrollTool();
 
            nChartControl1.Controller.Tools.Add(new NPanelSelectorTool());
            nChartControl1.Controller.Tools.Add(new NDataCursorTool());
            nChartControl1.Controller.Tools.Add(m_AxisScrollTool);
            nChartControl1.Controller.Tools.Add(m_DataZoomTool);
 
            //==============================
            NCartesianChart chart1 = CreateBarChart();
 
            nChartControl1.Panels.Clear();
            nChartControl1.Panels.Add(chart1);
 
            chart1.Location = new NPointL(new NLength(7, NRelativeUnit.ParentPercentage), new NLength(7, NRelativeUnit.ParentPercentage));
            chart1.Size = new NSizeL(new NLength(84, NRelativeUnit.ParentPercentage), new NLength(65, NRelativeUnit.ParentPercentage));
 
            NDockAxisAnchor anchor = new NDockAxisAnchor(AxisDockZone.FrontBottom);
            anchor.EndPercent = 80;
            chart1.Axis(StandardAxis.PrimaryX).Anchor = anchor;
            chart1.Axis(StandardAxis.PrimaryY).Anchor = new NDockAxisAnchor(AxisDockZone.FrontLeft);
            chart1.Axis(StandardAxis.PrimaryY).ScaleConfigurator.Title.Text = "Testing...!!!";
            chart1.Axis(StandardAxis.PrimaryY).ScaleConfigurator.Title.TextStyle.FontStyle = new NFontStyle("Ariel", 16);
            chart1.PositionChildPanelsInContentBounds = true;
            chart1.BoundsMode = BoundsMode.Stretch;
 
           
            NCartesianChart chart2 = CreateBarChart();
            chart2.SetPredefinedChartStyle(PredefinedChartStyle.HorizontalRight);
            chart2.DockMode = PanelDockMode.Right;
            chart2.BoundsMode = BoundsMode.Stretch;
            //chart2.Size = new NSizeL(new NLength(18, NRelativeUnit.ParentPercentage), new NLength(18,NRelativeUnit.ParentPercentage));
            chart2.Size = new NSizeL(new NLength(20, NRelativeUnit.ParentPercentage), new NLength(0, NRelativeUnit.ParentPercentage));
            chart2.Fit2DAxisContent = false;
            chart2.Axis(StandardAxis.PrimaryX).Visible = false;
            chart1.ChildPanels.Add(chart2);
           
            NCartesianChart chart3 = CreateBarChart();
            //chart3.SetPredefinedChartStyle(PredefinedChartStyle.Vertical);
 
            NDockAxisAnchor anchor2 = new NDockAxisAnchor(AxisDockZone.FrontBottom);
            anchor2.EndPercent = 100;
            chart3.Axis(StandardAxis.PrimaryX).Anchor = anchor2;
 
 
            chart3.Location = new NPointL(new NLength(7, NRelativeUnit.ParentPercentage), new NLength(75, NRelativeUnit.ParentPercentage));
            chart3.Size = new NSizeL(new NLength((float)(84.0f*0.80f),
NRelativeUnit.ParentPercentage), new NLength(20, NRelativeUnit.ParentPercentage));
 
           
            //chart3.DockMode = PanelDockMode.Bottom;
            chart3.BoundsMode = BoundsMode.Stretch;
            //chart3.Size = new NSizeL(new NLength(18, NRelativeUnit.ParentPercentage), new NLength(0));
            //chart3.Fit2DAxisContent = false;
            chart3.Axis(StandardAxis.PrimaryX).Visible = true;
            //chart1.ChildPanels.Add(chart3);
            
            nChartControl1.Panels.Add(chart3);
            NAxis XAxis1 = chart1.Axis(StandardAxis.PrimaryX);
            NAxis XAxis3 = chart3.Axis(StandardAxis.PrimaryX);
 
            XAxis1.Slaves.Add(XAxis3);
            XAxis3.Slaves.Add(XAxis1);
 
 
            //==============================================================
 
            NAxisCursor Axis1 = new NAxisCursor();
            NAxisCursor Axis2 = new NAxisCursor();
 
            Axis1.BeginEndAxis = (int)StandardAxis.PrimaryY;
            Axis2.BeginEndAxis = (int)StandardAxis.PrimaryY;
 
// each cursor is master of the other. When the users click on one of the
            // charts this will result in an automatic update of the other cursor
            Axis1.Slaves.Add(Axis2);
            Axis2.Slaves.Add(Axis1);
 
            chart1.Axis(StandardAxis.PrimaryX).Cursors.Add(Axis1);
            chart3.Axis(StandardAxis.PrimaryX).Cursors.Add(Axis2);
 
            NRangeSelection range1 = new NRangeSelection();
            NRangeSelection range2 = new NRangeSelection();
 
            range1.VerticalValueSnapper = new NAxisRulerMinMaxSnapper();
            range2.VerticalValueSnapper = new NAxisRulerMinMaxSnapper();
 
            // each range selection is master of the other. When the users click on one of
//the charts this will result in an automatic update of the other range // selection.
            range1.Slaves.Add(range2);
            range2.Slaves.Add(range1);
 
            chart1.RangeSelections.Add(range1);
            chart3.RangeSelections.Add(range2);
        }
 
        NCartesianChart CreateBarChart()
        {
            NCartesianChart chart = new NCartesianChart();
 
            NBarSeries bar = new NBarSeries();
 
            Random rand = new Random();
            for (int i = 0; i < 10; i++)
            {
                bar.Values.Add(10.0 + rand.Next(10));
                bar.Labels.Add("Tjumba");
                bar.FillStyles[i] = Color.LightGray;
                bar.WidthPercent = 20.0f;
                //bar.DataLabelStyle.Format= "<value> <label>";
                bar.DataLabelStyle.Format = "<label>";
 
            }
 
            chart.Series.Add(bar);
 
            return chart;
        }





https://www.nevron.com/forum/uploads/images/5dfeee00-bbe8-43af-b99e-45dc.png

By Nevron Support - Friday, June 5, 2015

Hi Hans,

You can use panel side guidelines for this purpose - check out the following example:

All Examples \ Layout \ Aligning Chart Areas

The code of interest is:

// add a guide line on the left
NSideGuideline guideLine = new NSideGuideline(PanelSide.Left);

guideLine.Targets.Add(m_ChartStockValues);
guideLine.Targets.Add(m_ChartStockVolumes);

nChartControl1.document.RootPanel.Guidelines.Add(guideLine);

This will align the two charts on their left plot bounds.

Hope this helps - let us know if you meet any problems.