How can I convert bar chart into donut chart in Aura - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
akshay desaiakshay desai 

How can I convert bar chart into donut chart in Aura

renderChart :function(component,event,helper){
        console.log('renderHighchart',new Date());
        //var settingName = component.get("v.settingName");
        var chartTitle = '';
        var chartFooterTitle='';
       
            	chartTitle='cip';
        	
        component.set("v.chartTitle",chartTitle);
        var chartRender;
        var chartOptions ={
            chart: {
                  renderTo: 'container',
                 type: 'bar', 
                 height: 228
            },
            legend: {
                enabled: false,
            },
            credits: {
                enabled: false
             },
            title: {
                align: 'left',
                style: {
                    fontSize : '16px',
                    fontFamily: 'Segoe UI',
                },
                floating:true,
            },
            xAxis: {
                visible:false,
                categories: component.get("v.xAxisCategories"),
                crosshair: true,
                lineColor: 'transparent',
                gridLineColor: 'transparent',
                labels:
                {
                    enabled: false
                }
            },
            yAxis: {
                visible:false,
                min: 0,
                lineColor: 'transparent',
                gridLineColor: 'transparent',
                title: 
                {
                    text: component.get("v.yAxisParameter")
                }
              
            },
            subtitle: {
               // text: 'Footnote subtitle',
                floating: true,
                align: 'right',
                x: -2,
                verticalAlign: 'bottom',
                y: 12,
                style: { 
                    fontSize : '16px',
                    fontFamily: 'Segoe UI',
                }
            },
             tooltip: {
              
                    enabled: true,
                    formatter: function() {
                      //  return ((this.y)+' Cases')
                      if(this.series.options.masterLabel == 'Over 72')
                      this.series.options.masterLabel = '> 72'
                      else if(this.series.options.masterLabel == 'Less or Equal to 12')
                      this.series.options.masterLabel = '<= 12'
                      else if(this.series.options.masterLabel == '13-24')
                      this.series.options.masterLabel = '12-24'
                      else if(this.series.options.masterLabel == '25-48')
                      this.series.options.masterLabel = '24-48'                     
                      else if(this.series.options.masterLabel == '49-72')
                      this.series.options.masterLabel = '48-72'
                      return  this.series.options.masterLabel;
                    },
                    },
                    
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        },                       
                       series: {
                           minPointLength: 5,
                           borderColor: '#303030',
                        dataLabels: {
                            enabled: true,
                            color: '#333333',
                            crop:false,
                            overflow:'none',
                            style: {fontWeight: 'bolder',backgroundColor: 'none'},
                            formatter: function() {
                                if(this.y != 0){
                                    return this.y
                            }},
                            align:"center",
                            x: 16,
                            y: 0,
                            
                        },
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                     if(this.y!=0 && this.color!='#ddd'){
                                        helper.navigateToAppPage(component,'cip',this.series.name.split('&&')[0],this.series.name.split('&&')[1]);
                                        }
                                   
                                }
                             
                            }
                        }
                    }
                },
        };

I tried to change type: 'doughnut', but its not working
it is changing in Pie chart but not in doughnut
Gaurav SharmaGaurav Sharma
it is not a standard feature of lightning aura component.
you should refer to help docs of third party js library you are using.