Chartview Series Opacity

3 posts, 1 answers
  1. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 12 Mar 2012 Link to this post

    Hello.

    In the past, I used to use the Chart control but migrated a few months ago to the ChartView control due to the memory leak associated with the Chart control.  Everything has been great, the only problem I've found is that I used to be able to specify the opacity of the series (for when different series would overlap) like this:

    <telerik:LineSeries Stroke="#FF51B0DD" StrokeThickness="2" Opacity="0.6"/>


    This no longer works with the ChartView control.  Any ideas why or what I can do to re-enable this behavior? 
  2. Answer
    Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 13 Mar 2012 Link to this post

    Hello Nick,

    You can either use the alpha value of the color like this:
    <telerik:RadCartesianChart>
        <telerik:LineSeries StrokeThickness="4" Stroke="#9951B0DD">
            <telerik:LineSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="C1" Value="1" />
                <telerik:CategoricalDataPoint Category="C2" Value="3" />
                <telerik:CategoricalDataPoint Category="C3" Value="2" />
                <telerik:CategoricalDataPoint Category="C4" Value="7" />
                <telerik:CategoricalDataPoint Category="C5" Value="2" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
     
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
    </telerik:RadCartesianChart>

    Or you can specify the SolidColorBrush.Opacity property like this:
    <telerik:RadCartesianChart>
        <telerik:LineSeries StrokeThickness="4">
            <telerik:LineSeries.Stroke>
                <SolidColorBrush Color="#51B0DD" Opacity="0.3" />
            </telerik:LineSeries.Stroke>
                     
            <telerik:LineSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="C1" Value="1" />
                <telerik:CategoricalDataPoint Category="C2" Value="3" />
                <telerik:CategoricalDataPoint Category="C3" Value="2" />
                <telerik:CategoricalDataPoint Category="C4" Value="7" />
                <telerik:CategoricalDataPoint Category="C5" Value="2" />
            </telerik:LineSeries.DataPoints>
        </telerik:LineSeries>
     
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
    </telerik:RadCartesianChart>


    Greetings,
    Bart.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 13 Mar 2012 Link to this post

    Works great.  Thanks!
Back to Top