Add examples of scriptable charts

[janelledement]

This PR adds a pie/doughnut example doc demonstrating scriptable options to augment the previously merged #5966. (I spoke to @simonbrunel about this over slack).

I keep to the same format in the document as the other examples found in the scriptable folder with a few changes:

1. I center the buttons underneath the chart.

2. I add a scriptable hoverBackgroundColor as well as scriptable backgroundColor.
   

3. I add a button that will toggle the view to a Doughnut Chart by changing the cutoutPercentage property.
   

Let me know if there's anything I can improve on.

[benmccann]

@janelledement could you add a fiddle that demonstrates your change? Example template: https://codepen.io/pen?template=JXVYzq

[simonbrunel]

Looks good, just a few minor changes. In your Slack message, I understood that you would like to add more scriptable samples. If so, do you want to update that PR with a line and polarArea examples (and maybe a radar one if not part of #6041 and after it's merged)?

[simonbrunel]

@janelledement you also need to add this new example in samples/sample.js, else it will not show up on the home page.

[janelledement]

@simonbrunel Working on adding line and polarArea examples.

[simonbrunel]

I was about to ask to make these two options scriptable but realized it's not yet scriptable for the line element. Once implemented, we should be able to do something like (as part of a different PR):

borderColor: function(context) {
    // make the line and point border color the 
    // same while different for each dataset.
    return utils.color(context.datasetIndex);
}

[janelledement]

@simonbrunel Maybe this is a consideration for radar chart as well? Adding scriptable line backgroundColor and borderColor?

[simonbrunel]

Yes, you right, line and radar controllers are very similar (currently trying to refactor them).