A way to change the center data in a Donut graph

^bump^

Tami,

Here is a sample to get you started. Look at the ‘params’ variable in the console. It will help you figure out how to add in additional pieces.

var params = arguments[0], $ = skuid.$;
console.log(params);

params.chart.events={
          load:function(){
         var chart = this,
           series = chart.series[0],
              firstPoint = series.data[0].y,
              nextPoint = series.data[1].y,
              percent = (firstPoint / (firstPoint + nextPoint)) * 100,
           value = 0;
              
          chart.setTitle({
          text: 100 - percent + '%',
          align: 'center',
            verticalAlign: 'middle'
          });
        }
    
};
    params.plotOptions.pie.dataLabels = {
    enabled: true,
    format: '<b>{point&#46;name}</b>: {point&#46;y:,&#46;0f}',
        };
    
    params&#46;colors =  ['#8edc00', '#e8eb00', '#e8aabb'];

Note that I had to hide the center text using CSS.

.sk-chart-innertext {
    visibility: hidden;
}

Thanks,

Bill

If this is a “progress/completion” donut/pie comparing two values and you want the second/smaller value in the series to be the initially selected value (and thus change the center value in a donut), change 

firstPoint = series&#46;data[0]&#46;y,<br />nextPoint = series&#46;data[1]&#46;y, 

to

firstPoint = series&#46;data[1]&#46;y,<br />nextPoint = series&#46;data[0]&#46;y,

Oliver,

Thanks for the tip on this!

Bill

Bill and Oliver,

Thank you very much! Combining both of your answers with a few tweaks and I was able to get it working. Below is the JavaScript snippet and CSS that I used. A point of note is the style attributes get defined in the JS snippet and not a CSS file, that took me a little while to figure out.

JS Snippet

var params = arguments[0], $ = skuid.$;
console.log(params);
params.chart.events={
          load:function(){
         var chart = this,
           series = chart.series[0],
              firstPoint = series.data[1].y,
              nextPoint = series.data[0].y,
              percent = ((nextPoint / firstPoint) * 100 || 0),
           value = 0;
           
         chart.setTitle({
          text: percent.toFixed(1) + '%',
          align: 'center',
            verticalAlign: 'middle',
            style: { "color": "#8064A2", "fontSize": "30px" }
            
          });
        }
    
};
    params.plotOptions.pie.dataLabels= {
    enabled: false,
    format: '<b>{point.name}</b>: {point.y:,.0f}',
        
        };
    
    params.colors =  ['#8064A2', '#A6A6A6']; 

CSS

.sk-chart-innertext {    visibility: hidden;
}

Glad you got this fixed.  And thanks for sharing your solution.