Jump to content
Software FX Community

Color Synchronization between two charts?


Recommended Posts

Is there any way to synchronize the color between two separate charts? How about between two pie charts that are part of the same chart control (like the Earth/Moon style chart in the demo application)?

In regards to the Earth/Moon style pie chart:

I have two charts with potentially different sets of data that may or may not overlap.

When the data overlaps, I would like the legend entries to be the same color for the corresponding item in both charts. However, it appears that the coloring algorithm is somehow tied to the order of the data point in the series so the two charts must be sorted in the exact same order.

Is it possible to specify this coloring algorithm manually so the two charts can be sorted differently (or display different sets of data and leave it up to me to figure out the best coloring to use)?

Thank you,


Link to comment
Share on other sites

In a chart that is colored per series (Bar, Line, Area, etc.) you can control the brushes used for both Fill and Stroke by setting the chart.Series.Fill and chart.Series.Stroke respectively. If you only set Fill we will use a slightly darker variation for the stroke.

In a chart that is colored per points (Pie, Doughnut, Pyramid, etc) you can control the same brushes by setting the chart.Points.Fill and chart.Points.Stroke properties.

Note that in a pie chart with 2 series we will use the same color in both pies to represent each point so I am not sure why you asked the following "How about between two pie charts that are part of the same chart control"



Link to comment
Share on other sites

Here is an issue I'm having that might be related to the items fromtwo charts getting out of visual sync. I have a chart in xaml calledmyChart, and the 4 following lines in the code behind afterInitializeComponent().

myChart.Series.Add(new SeriesAttributes());myChart.Gallery = Gallery.Pie;myChart.Data[0, 0] = new DataUnit(1);//myChart.Data[1, 0] = new DataUnit(2);

If you copy and paste this code, it works just as I expected. However, if you comment out the last line, all data from the first pie chart disappears. I assumed I was adding data to a second series and that it should show up in the second pie, because the documentation states:

"If more than one data series is passed to the chart, Chart FX will create as many pies as series are in the data set resulting in multiple pie charts in the chart area."

When the last line is uncommented, I would expect to see 2 pies, the top one with 100% in one slice, and then the bottom one having 2 slices at 40% and 60%.

I hope this is something that I am missing, and I can be set on the right path rather easily and examine my other issue further. Also, I'm doing this in the code behind as opposed to xaml because the routine that generates charts in my software is dynamic and i have certain restrictions that make me unable to always bind to a collection / use xaml.

Thank you,



Link to comment
Share on other sites

This code would generate a single pie with 2 slices

chart1.Data.Series = 1;chart1.Data.Points = 2;chart1.Data[0, 0] = 7;chart1.Data[0, 1] = 4;

This code would generate two pies each with 3 slices

chart1.Data.Series = 2;chart1.Data.Points = 3;chart1.Data[0, 0] = 7;chart1.Data[0, 1] = 4;chart1.Data[0, 2] = 2;

chart1.Data[1, 0] = 70;chart1.Data[1, 1] = 125;chart1.Data[1, 2] = 30;


Link to comment
Share on other sites

What I'm really looking for is the ability to "tag" each pie slice in each separate pie with a legend item. If you look at the following screenshot (it's working as expected):

Posted Image 

you will see that the pie slices are colored in the same order.

While the chart above is working as expected, I do not know of any way to set the slice names other than using the AxisX.Labels.Items collection.


Here is my aim:

"Value=1" = small slice


"Value=5" = large slice

-- Alternatively,

"Dark Blue Slice" = small slice


"Red Slice" = large slice


Because of the sharing of the slice names through the AxisX.Labels.Items collection, I do not see a way to do this. Should I apply the coloring manually to achieve the desired effect, or is there a way to "link" pie slices through a means OTHER than their position in the chart1.Data[x,y] collection?



Link to comment
Share on other sites

After some contemplating, it appears that my only option is to specify the colors manually at generation time. Please help me see if I understand correctly:

By using Reflector, I see that there are 3 types of conditions that can be assigned to ConditionalAttributes.

1) RangeCondition

2) DelegateCondition

3) TrueCondition

RangeCondition appears like it will only work on a chart with a single pie because a corrolary slice in pie 1 and pie 2 might fall in 2 different ranges (and thus get assigned two different colors).

DelegateCondition will call a method called EvaluateCondition, but it seems like it adds no value because:

  • The event is only fired when the chart's data is being assigned (chart1.Data[x,y] = z)
  • The ConditionValueEventArgs passed into the event handler only spits back the information that I already know from 1 (x, y, and z)
  • Most importantly, it is marked as "For internal use only" in the online help, so I hesitate to use it.

TrueCondition - I am not quite sure what this does. What object is BindingPath referring to? Where do I define the logic to determine whether this condition should be true/false?


Is there up-to-date documentation I can download or view online? Much of the documentation I see still has "This topic is pre-release documentation" or "Description goes here".

Thank you,


Link to comment
Share on other sites

The green/blue slices represent the same items in both pies.

Posted Image

When hovered from the first pie, the green/blue slice does not light up on the second pie (but it does on the legend).

When hovered on the second pie, the green/blue slice does not light anything up except the pie it is on.

This is the code used to generate it:

// There is a ChartFX.WPF.Chart control in the XAML named "chart1"

  public Window1()

  chart1.Gallery = Gallery.Pie;

  // Two pies, two slices per pie
  chart1.Data.Series = 2;
  chart1.Data.Points = 2;

  // Sorted differently
  // - Data[0,0] corrolates to Data[1,1]
  // - Data[1,0] corrolates to Data[0,1]
  chart1.Data[0, 0] = 1;
  chart1.Data[1, 0] = 2;
  chart1.Data[0, 1] = 2;
  chart1.Data[1, 1] = 1;

  // ... with custom coloring
  chart1.Points[0, 0].Fill = Brushes.PaleGreen;
  chart1.Points[1, 1].Fill = Brushes.PaleGreen;
  chart1.Points[0, 1].Fill = Brushes.SteelBlue;
  chart1.Points[1, 0].Fill = Brushes.SteelBlue;

  // Using a RangeCondition is impossible, because:
  // - in pie1 the values are 1 && 2
  // - in pie2 the values are 2 && 4

  //Setting chart1.Points[0].Fill is impossible because of the ordering of the charts (the blue slice in pie1 will be evaluated the same at the green slice in pie2

As I noted in the code, setting Points[0].Fill is impossible because it refers to the Green slice in the first pie, but the blue slice in the second pie.


Thank you,


Link to comment
Share on other sites

Change the custom coloring code as follows

  // ... with custom coloring

  PointAttributes p0 = new PointAttributes();

  p0.Fill = Brushes.PaleGreen;

  chart1.Points[0, 0] = p0;

  chart1.Points[1, 1] = p0;

  PointAttributes p1 = new PointAttributes();

  p1.Fill = Brushes.SteelBlue;

  chart1.Points[0, 1] = p1;

  chart1.Points[1, 0] = p1;

Small explanation on why per-point attributes highlight as they do can be found on this thread


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...