In the previous sample we shown how to present multiple chart by keeping them aligned in order to be comparable on the horizontal axis by using the WidthSpring feature. But D3 charting can automatically pan and zoom ( both by rect zoom by pressing control and left dragging the mouse on the chart, or by the wheel ) and in this case we loose the axis synchronization. Here below the undesired behavior:
 | On the left we see the top chart zoomed, the other ones show the horizontal range thus there is no more relation among the three charts. |
So we create an attached property as below:
<ddd:ChartPlotter x:Name="price" ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=volume}" …>
by applying this property we choose which axis synchronize ( X in the example, but can be Y or XY ) and which chart keep synchronized with, in this case we bind with the chart named “volume”. By repeating the property two chart by two chart:
<ddd:ChartPlotter x:Name="volume" ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=ma}" …>
<ddd:ChartPlotter x:Name="ma" ddd:SynchroVisible.Axis="X" ddd:SynchroVisible.With="{Binding ElementName=price}" …>
so we achieve this interesting result without any code behind:
 |
This is the result after panning the chart ( by dragging the mouse pointer into the chart area in any of the three chart ) as you can see the other chart properly follow… |
 |
The same apply if we zoom on the chart area ( by pressing ctrl while dragging, or by the mouse wheel ) other chart amplify the resolution on the synchronized axis and the start position accordingly. |
Check out the source for this example here.