The current implementation using SynchroVisible and With fails when there is more than three chart to synchronize. So I modified the code and added a central agent to keep in synch more charts. We just need to define an instance of it as a resource:

< Window.Resources >
       …

          
          
          
            <
          
          
            ddd
            :
            MultiChartSynchronizer 
            x
            :
            Key
          
          
            ="mainSynchro"/> </
          Window.Resources
          > 
        

and then “subscribe” each chart to keep in synch with:

          <
          ddd
          :
          ChartPlotter 
          x
          :
          Name
          ="price" 
          ddd
          :
          SynchroVisible.Axis
          ="X" 
        

ddd : SynchroVisible.Using ="{ StaticResource mainSynchro }"

          
          
          LegendVisibility
          ="Hidden" 
          NewLegendVisible
          ="False" 
          Grid.Row
          ="1"> 
        

obviously we can have multiple instance of synchronizer object to create more context in which chart align.

You can find and follow this project on Bitbucket.

Just add a new feature to decide where to place the vertical axis: left or right aligned to the plot area. Here the property usage:

          <
          ddd
          :
          ChartPlotter 
          
            MainVerticalAxisPlacement
          
          
            ="Right"
          
          …
          > 
        

A modification was necessary even in the WidthSpring element, the one that allow us to keep more than one chart synchronized on the X axis ignoring the space taken by the label area. It is now possible to specify that the WidthSpring must act on the left of the chart. Here the usage with the new properties:

          <
          ddd
          :
          WidthSpring 
          
            ActiveOnSide
          
          
            ="Right"
          
          SourcePanel
          ="{
          Binding 
          
            RightPanel
          
          , 
          ElementName
          =volume}"/> 
        

by this addition the chart behave correctly even with the right side placed vertical axis:

Source for this project can be found here.

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.