Dotted connector line for data labels in donut chart

[Sarah Riethmüller]

Hi,

is it possible to draw dotted straight connector lines for the data labels in a accumulation chart like in the picture I here: https://imgur.com/a/TZNogTx ?

Thanks!

[Baby Palanidurai]

Hi Sarah, 

Thanks for using syncfusion products, 

      We have analyzed your query. As a work around, we can achieve your requirement by getting the connector element in loaded event and setting the dasharray attribute for that element.  Also We will provide an API for this dashArray in connectorStyle options on next patch release which is expected on 17 July, 2018. 

Please find the code snippet below to achieve this requirement. 

<ejs-accumulationchart id="container" (loaded)="loaded($event)"> 

        <e-accumulation-series-collection> 

            <e-accumulation-series [dataLabel]="dataLabel"> 

            </e-accumulation-series> 

        </e-accumulation-series-collection> 

    </ejs-accumulationchart> 

 

public dataLabel: Object = { 

        visible: true, position: 'Outside', 

        connectorStyle: { length: '15%' },  

        name: 'text', 

}; 

 

public loaded(args: IAccLoadedEventArgs): void { 

        let dataLabelElement = document.getElementById('container_datalabel_Series_0'); 

        let connectorElement; 

        for (let i: number = 0; i < dataLabelElement.children.length; i++) { 

          connectorElement = dataLabelElement.children[i].getElementsByTagName('path'); 

          connectorElement[0].setAttribute('stroke-dasharray', '5,5'); 

        } 

    } 

Screenshot:  

 

Sample for reference can be find from below link. 

https://stackblitz.com/edit/angular-vt6pfk?file=src/app/app.component.ts 

 

 

Kindly revert us, if you have any queries. 

Thanks, 

Baby.

[Baby Palanidurai]

Hi Sarah, 

  

We are glad to announce that our v16.2.45 patch release is rolled out, we have included the API dashArray in connectorStyle options for accumulation charts to customize the dotted line and is available for download under the following link. 

  

Npm Packages: https://www.npmjs.com/~syncfusionorg 

Code Snippet 

<ejs-accumulationchart id="container">  

        <e-accumulation-series-collection>  

            <e-accumulation-series [dataLabel]="dataLabel">  

            </e-accumulation-series>  

        </e-accumulation-series-collection>  

    </ejs-accumulationchart>  

  

public dataLabel: Object = {  

        visible: true, position: 'Outside',  

        connectorStyle: { length: '15%', dashArray : '2,3' },   

        name: 'text',  

};  

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Thanks,          

Baby.