Border line on Donut

[Robert]

Hi,

I have been trying to remove a small border that appears on a donut we render with one series but a grouped datasource. This shows two rings. Please see screenshot.  The border is clear in the blue area, we want the colours to be seamless without the faint line inbetween.  Please point me to the config option which may remove this line.

Here is my current config:

{
legend: {
    visible: false
},
theme: "flat",
chartArea: {
    background: "",
},
dataSource: new kendo.data.DataSource({
    data: [],
    group: { field: "level"},
    sort: [
        { field: "divisionId", dir: "asc" },
        { field: "name", dir: "asc" }
    ],
}),
seriesDefaults: {
    type: "donut",
    startAngle: 0
},
series: [
    {
        field: "value",
        categoryField: "name",
        colorField: "colour",
        labels: { visible: false },
        highlight: { visible: false },
        holeSize: 52,
        margin: 0,
        border: { width: 0 },
        line: { visible: false },
    }],
valueAxis: {
    line: { visible: false },
    majorGridLines: { visible: false },
    minorGridLines: { visible: false },
    labels: { visible: false },
},
categoryAxis: {
    line: { visible: false },
    majorGridLines: { visible: false },
    minorGridLines: { visible: false },
    labels: { visible: false },
},
seriesClick: scope.onSeriesClick,
tooltip: {
    visible: true,
    template: "#= category #:  #= kendo.toString(value, 'n0') #"
}
};

[Hristo Germanov]

Hello Robert,

You can use the space around the segment with border but you need to get the point's color. In this case you need to use series.border.color function. Live example: http://dojo.telerik.com/ePiV/3

Regards,
Hristo Germanov
Telerik

 

 

[Robert]

Hi Hristo,

Does that mean you can't remove the space only colour it, and that it will all be one colour only?  The link you have provided does not seem to work for me, can you please check it

Thanks,
Rob.

[T. Tsonev]

Hi,

The approach with setting the border will likely work after some fine tuning, but I think it will be better if we drop it and set a negative margin instead:
seriesDefaults: {
  margin: -0.5; // Half border width
}

-- Live demo --

This will effectively overlap the two series leaving no space in between.

Regards,
T. Tsonev
Telerik

 

 

[Robert]

Hi T. Tsonev,

Thanks for the suggestion, I'll give it a try.
BTW: your link is not working for me either, just says failed to load at the bottom of the source code area.

Cheers,
Rob.

[T. Tsonev]

Hello,

Please give it another try. It seems that the service was temporary down.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik