Question: I have a function whose name is rendered which get two params: the container is a `<select>` in HTML and items just is my student array of an object which contains information of each student and it has 'class' property.

My idea is to create an `<opgroup>` tag in string and then pass it to HTML through `.innerHTML`. The problem is that I want to create a new `<optgroup>` relatively to student's class to separate each class, but I have no idea of passing `object.class`'s value to the `<optgroup>` label. Can you show me the way to pass a JavaScript variable to this `<optgroup id="optgroup-class"></optgroup>` string in a js file?

```
function render(container, items) {

    var htmlItems = items.map(function (item) {
        return '<option id="std-option">' + item.name + '</option>';
    });

    htmlItems.unshift('<optgroup id="optgroup-class"></optgroup>'); //add optgroup to the first index of htmlItems

    var html = htmlItems.join(''); //join all the <stringArray> to just one html tag string
    container.innerHTML = html; //get that <stringArray> to .student-list-container select in html
}

```

Answer: 
You have to add the type parameter of the PieChart.
simply remove the `defaultRenderer` and it will work