This is a migrated thread and some comments may be shown as answers.

Legend Will Only Display Labels (Windows 10)

2 Answers 83 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 09 Mar 2018, 02:37 PM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 12 Mar 2018, 05:33 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Matthew
Top achievements
Rank 1
answered on 12 Mar 2018, 07:06 PM
Thanks so much for your help!  I really appreciate it.
Tags
Chart
Asked by
Matthew
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or