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

Filling inside markers.

1 Answer 38 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ahmet
Top achievements
Rank 1
Ahmet asked on 14 Mar 2019, 04:36 PM

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

 

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Mar 2019, 05:21 PM
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.
Tags
Chart (HTML5)
Asked by
Ahmet
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or