Filling inside markers.

2 posts, 0 answers
  1. Ahmet
    Ahmet avatar
    15 posts
    Member since:
    Sep 2016

    Posted 14 Mar Link to this post

    Hello, I have a chart created with ScatterLineSeries. Everything works, except the color inside the markers is white. I'd like it to be filled with the same color of the marker's outline.

    Is there a property to fill inside the marker "automatically". when the chart or the series is first created ?

    I am aware of there are SeriesItem.BackgroundColor and series.MarkersAppearance.BackgroundColor properties; However, I need to fill the markers automatically (when the chart is first created), since the different (mutliple) series get different colors and I can't tell what color will the series be.

     

    I am attaching a screenshot

     

    Thank you

    Ahmet

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 15 Mar Link to this post

    Hello Ahmet,

    If you define the color of the series, you can also define the fill color of the markers to match it:

    <telerik:RadHtmlChart runat="server" ID="rhc1" Width="400" Height="300">
        <PlotArea>
            <Series>
                <telerik:LineSeries>
                    <Appearance FillStyle-BackgroundColor="Red"></Appearance>
                    <MarkersAppearance MarkersType="Triangle" BackgroundColor="red" />
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1"  />
                        <telerik:CategorySeriesItem Y="10"/>
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    An alternative is to go and set the background colors of all series markers configuration as a function through the underlying Kendo Chart. Here is the general approach to use functions for such fields: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.markers.background. Here is an example I made for you that uses RadHtmlChart:

    <script>
        function OnLoadHandler(sender, args) {
            var kChart = sender.get_kendoWidget();
            var opts = kChart.options;
            for (var i = 0; i < opts.series.length; i++) {
                opts.series[i].markers = opts.series[i].markers || {};
                opts.series[i].markers.background = function (e) {
                    return e.series.color; // will match the series color
                }
            }
            kChart.setOptions(opts);
            kChart.refresh();
        }
    </script>
    <telerik:RadHtmlChart runat="server" ID="rhc1" Width="400" Height="300">
        <ClientEvents OnLoad="OnLoadHandler" />
        <PlotArea>
            <Series>
                <telerik:LineSeries>
                    <MarkersAppearance MarkersType="Triangle" />
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top