I am placing a chart on a container that's half the width of my 1680-width screen. The legend is clipped off. If the panel is made wider (let's say the width of the display), the legend appears.
What do I have to do to force the legend to appear regardless of the width?
If your code allowed us to reposition the legend to the top or bottom of the chart, this wouldn't be an issue.
Yeah, the chart doesn't support legend sharing using that method. I believe the only way in this version of the chart to display series from a different chart on the same legend is to manage the Items collection on the legend directly.
Because a control in Silverlight/WPF can only be attached to the visual tree at one place at a time, when you provided the single Legend instance to two chart controls it, in effect, told whichever chart that was initialized second to remove the Legend from its current place in the visual tree and place it under itself, so that it stays attached in only one place. This explains the behavior you are seeing.
Here is the sample modified to add legend items for each series to a single legend:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); LayoutRoot.RowDefinitions.Add(new RowDefinition()); LayoutRoot.RowDefinitions.Add(new RowDefinition()); LayoutRoot.ColumnDefinitions.Add(new ColumnDefinition()); LayoutRoot.ColumnDefinitions.Add(new ColumnDefinition()); Border border1 = new Border(); border1.Background = new SolidColorBrush(Colors.LightGray); border1.Padding = new Thickness(10); XamWebChart chart1 = new XamWebChart(); Legend legend1 = new Legend(); chart1.Legend = legend1; Series series1 = new Series(); series1.Label = "Series 1"; series1.ChartType = ChartType.Line; series1.DataPoints.Add(new DataPoint(1)); series1.DataPoints.Add(new DataPoint(2)); series1.DataPoints.Add(new DataPoint(3)); series1.DataPoints.Add(new DataPoint(4)); series1.Fill = new SolidColorBrush(Colors.Blue); series1.Stroke = new SolidColorBrush(Colors.Black); series1.StrokeThickness = 1; chart1.Series.Add(series1); border1.Child = chart1; Grid.SetColumnSpan(border1, 2); LayoutRoot.Children.Add(border1); Border border2 = new Border(); border2.Background = new SolidColorBrush(Colors.DarkGray); border2.Padding = new Thickness(10); XamWebChart chart2 = new XamWebChart(); chart2.Legend = new Legend() { Visibility = Visibility.Collapsed }; Series series2 = new Series(); series2.Label = "Series 2"; series2.ChartType = ChartType.Column; series2.DataPoints.Add(new DataPoint(1)); series2.DataPoints.Add(new DataPoint(2)); series2.DataPoints.Add(new DataPoint(3)); series2.DataPoints.Add(new DataPoint(4)); series2.Fill = new SolidColorBrush(Colors.Red); series2.Stroke = new SolidColorBrush(Colors.Black); series2.StrokeThickness = 1; chart2.Series.Add(series2); border2.Child = chart2; Grid.SetRow(border2, 1); LayoutRoot.Children.Add(border2); LegendItem item1 = new LegendItem() { Fill = series1.Fill, Stroke = series1.Stroke, StrokeThickness = series1.StrokeThickness, Text = series1.Label }; LegendItem item2 = new LegendItem() { Fill = series2.Fill, Stroke = series2.Stroke, StrokeThickness = series2.StrokeThickness, Text = series2.Label }; legend1.Items.Add(item1); legend1.Items.Add(item2); } }
Hope that helps!
Yes, I too wish the forum message area was a bit wider. As for posting code, I've found that pasting the code into outlook and then copying it out again before pasting in the forums seems to get html into passable good order, but the width of the message area is still a bit problematic. Another option relates to the forums running a javascript syntax highlighter that will search for elements that look like this:
<pre name="code" class="c#:nogutter">
...code.
</pre>
So if you hit the html edit button you can wrap that around the code you want to be highlighted. This is how I achieve the blocks you see in my replies. You have to escape the open angle bracket characters if your code is of xml format.
The third option is that you can attach files to the posts by clicking the options tab while posting. Or, of course, you can ask for an email address to send the files to.
-Graham
I figured out what I was doing wrong, but it doesn't make sense. I had created a single Legend object because I have multiple charts on a given page, and they all use the same font size, so I figured I'd just create one and use it in all the charts. Well, for some reason, that has a side effect of rendering legends in such a way as to arrtificially impose some sort of size restriction on all of the charts that use the common legend. This really deserves a hearty "WTF".
For the record, using your forums is beyond painful:
0) The message area is too frakking narrow
1) Automatically starting a new paragraph on each press of the Enter key is a total pain in the ass.
2) there's no apparent way to highlight a block of code and say that it's a block of code.
Here's an example of creating two charts in code, one with full width and one with half width. If you could indicate how your approach is different we might be able to determine why the legend is getting clipped in your case:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); LayoutRoot.RowDefinitions.Add(new RowDefinition()); LayoutRoot.RowDefinitions.Add(new RowDefinition()); LayoutRoot.ColumnDefinitions.Add(new ColumnDefinition()); LayoutRoot.ColumnDefinitions.Add(new ColumnDefinition()); Border border1 = new Border(); border1.Background = new SolidColorBrush(Colors.LightGray); border1.Padding = new Thickness(10); XamWebChart chart1 = new XamWebChart(); chart1.Legend = new Legend(); Series series1 = new Series(); series1.Label = "Series 1"; series1.ChartType = ChartType.Line; series1.DataPoints.Add(new DataPoint(1)); series1.DataPoints.Add(new DataPoint(2)); series1.DataPoints.Add(new DataPoint(3)); series1.DataPoints.Add(new DataPoint(4)); chart1.Series.Add(series1); border1.Child = chart1; Grid.SetColumnSpan(border1, 2); LayoutRoot.Children.Add(border1); Border border2 = new Border(); border2.Background = new SolidColorBrush(Colors.DarkGray); border2.Padding = new Thickness(10); XamWebChart chart2 = new XamWebChart(); chart2.Legend = new Legend(); Series series2 = new Series(); series2.Label = "Series 2"; series2.ChartType = ChartType.Column; series2.DataPoints.Add(new DataPoint(1)); series2.DataPoints.Add(new DataPoint(2)); series2.DataPoints.Add(new DataPoint(3)); series2.DataPoints.Add(new DataPoint(4)); chart2.Series.Add(series2); border2.Child = chart2; Grid.SetRow(border2, 1); LayoutRoot.Children.Add(border2); } }
Which produces this:
Edit: cleaned up the code a little bit.
Yes, there are two charts on the page. One is the width of the screen and has a legend., the other is half the width of the screen anbd has no legend. This is true whether the legend is on the top or on the right side.
BTW, a vertically stacked legend is kinda pointless at the top of a chart. I assume that the legend items are in a stackpanel. How do I go about making the legend items horixzontally aligned?
Comment: For a "data visualization" library, it's a pain in the ass to "visualize" anything. I always thought toolkist were supposed to make things easier.
Just to check, did you apply this style to the chart?
chart.Style = Resources["topLegend"];
Where the above style has been placed in the appropriate resource dictionary.
Could you provide any detail about the code you are using to create the chart? What kind of container are you placing it in?