# Synced Major Gridlines

**This discussion was imported from CodePlex**

**KB24** wrote at 2014-05-28 17:31:

Hi and thanks for an awesome component.

I'm trying to accomplish the following:

Does anyone have any experience doing this and can give me a nudge in the right direction?

I'm trying to accomplish the following:

- One main y-axis on the left side.
- Two secondary y-axes on the right side.
- All three axes are at different scales and connected to different curves.

Does anyone have any experience doing this and can give me a nudge in the right direction?

**objo** wrote at 2014-06-06 21:18:

I would like this too! I added
https://oxyplot.codeplex.com/workitem/10217

I think it can be related to "synchronized axes" - https://oxyplot.codeplex.com/workitem/9945

but I have no idea on how to solve it!

I think it can be related to "synchronized axes" - https://oxyplot.codeplex.com/workitem/9945

but I have no idea on how to solve it!

**KB24** wrote at 2014-06-21 15:03:

I kinda solved this problem, unfortuntely I did not have time to do it in a completely generic fashion.

You are welcome to use any of the follwing to make it generic and add it to Oxyplot though!

Background:

My graph contains 4 y-axis, 2 on each side.

Implementation:

I first had to decide how many major grid lines I was going to use for all the axes.

In my case, I constrained it to 20, because it works out well enough.

But one Idea I had that I never had time to implement was to let oxyplot create the axis natuarally by it self,

then find the one which naturally had the most grid marks and use that number of gridmarks as my gridmarkCount.

Then I had to make sure each axis started on a value and ended on a value, so first grid mark is always at the very bottom and last gridmark is always at the very top. This is simple enough if you set the minimum and maxium values to proper values.

Then I had to calculate a gridStep value that was evenly divisible by (maximum - minumum) / gridmarkCount.

This can be a bit tricky because the step values have to follow 1, 2, 5 , 10 etc, but its doable.

Finally, I needed a function to simply add x amount of gridSteps to the maximum of all other axis except the main, to make sure we ended up with gridmarkCount.

In my specific example it worked out like this:

You are welcome to use any of the follwing to make it generic and add it to Oxyplot though!

Background:

My graph contains 4 y-axis, 2 on each side.

Implementation:

I first had to decide how many major grid lines I was going to use for all the axes.

In my case, I constrained it to 20, because it works out well enough.

But one Idea I had that I never had time to implement was to let oxyplot create the axis natuarally by it self,

then find the one which naturally had the most grid marks and use that number of gridmarks as my gridmarkCount.

Then I had to make sure each axis started on a value and ended on a value, so first grid mark is always at the very bottom and last gridmark is always at the very top. This is simple enough if you set the minimum and maxium values to proper values.

Then I had to calculate a gridStep value that was evenly divisible by (maximum - minumum) / gridmarkCount.

This can be a bit tricky because the step values have to follow 1, 2, 5 , 10 etc, but its doable.

Finally, I needed a function to simply add x amount of gridSteps to the maximum of all other axis except the main, to make sure we ended up with gridmarkCount.

In my specific example it worked out like this:

- MainAxis predetermined, not dynamic.
- GridmarkCount = 20, not dynamic.
- Minimum and Maximum always are 0 and 100 on my main axis, not dynamic.
- Thus gridmarkStep becomes 5 on my main axis.
- Calculate minimum and maximum for all other axis.

If other axis turned out to have less than 20 gridmarks, I simply added x gridSteps to the maximum, thus changing the maximum until that axis gridmarkcount became 20. - Ensure each axis has an appropriate minimum and maximum to ensure first value is the absolute bottom and highest value is at the absolute top.

**Slxe** wrote at 2014-07-02 20:40:

I've been syncing the axes using Zoom, although imo it's messy and I'm not really happy with it. As far as major grid lines I just leave the primary vertical and horizontal axes to handle them >_> again not a good overall solution. I mentioned in
another post that it'd also be nice to have AxisChangeTypes include the type of zoom (by scale, factor or values) and the actual values sent, to make it easier to transform them into screen points and use them with the other axes.

Here's how I'm handling the axes, pretty sure I based it off an example:

(Quick note, this is done for multiple vertical and one horizontal axes)

Here's how I'm handling the axes, pretty sure I based it off an example:

(Quick note, this is done for multiple vertical and one horizontal axes)

private void Axis_OnAxisChanged(object sender, AxisChangedEventArgs args) { if (_syncChange || ((Axis) sender).IsHorizontal()) return; _syncChange = true; switch (args.ChangeType) { case AxisChangeTypes.Zoom: case AxisChangeTypes.Pan: _chartIsZoomed = true; foreach (var a in uiChartPlot.Model.Axes) { if (a.Key == ((Axis) sender).Key || a.IsHorizontal()) continue; double min = a.InverseTransform( ((Axis) sender).Transform(((Axis) sender).ActualMinimum)); double max = a.InverseTransform( ((Axis) sender).Transform(((Axis) sender).ActualMaximum)); a.Zoom(min, max); } break; // case AxisChangeTypes.Zoom: // break; case AxisChangeTypes.Reset: _chartIsZoomed = false; break; } uiChartPlot.InvalidatePlot(false); _syncChange = false; }

Customer support service by UserEcho

## Replies 0