Legend Will Only Display Labels (Windows 10)

[Matthew]

Hi,

I cannot get my legend to display anything other than the labels.  It will not show the color shapes.  The stacked bar chart seems to be working correctly.  Could you please take a look at my XAML code, and tell me what I'm doing wrong?  I've tried everything but just can't figure this out.

 

<telerikPrimitives:RadLegendControl LegendProvider="{Binding ElementName=BarChart}"                                          
                                            x:Name="legend"
                                            RelativePanel.Below="BarChart"
                                            RelativePanel.AlignLeftWithPanel="True">
                    <telerikPrimitives:RadLegendControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal">
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </telerikPrimitives:RadLegendControl.ItemsPanel>
                </telerikPrimitives:RadLegendControl>

                <telerikChart:RadCartesianChart Name="BarChart" PaletteName="DefaultDark"  RelativePanel.Below="pieChart" Width="400" Height="400">
                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:CategoricalAxis />
                    </telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:LinearAxis />
                    </telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:RadCartesianChart.Grid>
                        <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y" />
                    </telerikChart:RadCartesianChart.Grid>
                    <telerikChart:BarSeries ItemsSource="{Binding MyData, Mode=TwoWay}" CombineMode="Stack" LegendTitle="Ready" IsVisibleInLegend="True">
                        <telerikChart:BarSeries.ValueBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                        </telerikChart:BarSeries.ValueBinding>
                        <telerikChart:BarSeries.CategoryBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Evaluator"/>
                        </telerikChart:BarSeries.CategoryBinding>
                    </telerikChart:BarSeries>
                    <telerikChart:BarSeries ItemsSource="{Binding MyData2, Mode=TwoWay}" CombineMode="Stack" LegendTitle="Not Ready" IsVisibleInLegend="True">
                        <telerikChart:BarSeries.ValueBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                        </telerikChart:BarSeries.ValueBinding>
                        <telerikChart:BarSeries.CategoryBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Evaluator"/>
                        </telerikChart:BarSeries.CategoryBinding>
                    </telerikChart:BarSeries>
                </telerikChart:RadCartesianChart>

[Lance | Senior Manager Technical Support]

Hello Matthew,

I can reproduce this. There seems to be an issue that is occurring where the LegendItem's Fill and Stroke values are null at runtime (even though it works at design-time). These properties are used to set the Rectangle of the LegendItem,

I have reported this to the development team and added it the backlog, you can upvote and follow the report here. In the meantime, I have come up with a workaround in the attached demo, let me walk you through it.

Workaround Explanation
'
I found that even though Fill and Stroke were null, the LegendItem.Title property still contains the hard-coded value you've set in your series. This means we can use that value in a converter to return the appropriate colors.

public class LegendColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if(value is LegendItem item)
        {
            if (item.Title == "Ready")
            {
                // 1E98E4 is the blue color in DefaultDark
                return new SolidColorBrush(Color.FromArgb(0xFF, 0x1E, 0x98, 0xE4));
            }
            else if (item.Title == "Not Ready")
            {
                // FFC500 is the yellow color in DefaultDark
                return new SolidColorBrush(Color.FromArgb(0xFF, 0xFF, 0xC5, 0x00));
            }
        }

        return new SolidColorBrush(Colors.Black);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

We use this converter in a RadLegend ItemTemplate:

<telerikPrimitives:RadLegendControl LegendProvider="{Binding ElementName=BarChart}"
                    x:Name="legend"
                    RelativePanel.Below="BarChart"
                   RelativePanel.AlignLeftWithPanel="True">
    <telerikPrimitives:RadLegendControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </telerikPrimitives:RadLegendControl.ItemsPanel>
    <telerikPrimitives:RadLegendControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Ellipse Fill="{Binding Converter={StaticResource LegendColorConverter}}"
                     Width="10"
                     Height="10" />
                <TextBlock Text="{Binding Title}"
                      Foreground="{Binding Converter={StaticResource LegendColorConverter}}"
                      Margin="10">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </telerikPrimitives:RadLegendControl.ItemTemplate>
</telerikPrimitives:RadLegendControl>

Here is the result at runtime:



Thank you for reporting this issue, I have updated your Telerik points accordingly. 

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Matthew]

Thanks so much for your help!  I really appreciate it.