Pie chart does not draw if id contains dot (like foo.com)

[irfan]

Here is my template:

<c3chart bindto-id="report-chart" callback-function="chartInitCallback" chart-data="piePoints" chart-columns="pieColumns">
    <chart-pie show-label="true" expand="true">
    <chart-pie show-label="true" expand="true">
    <chart-size chart-height="330"/>
    <chart-axis-x show="false" />
    <chart-axis-y show="false" />
    <chart-colors color-pattern="#ffbb78,#98df8a,#e377c2,#f7b6d2,#dbdb8d,#17becf,#9edae5" />
</c3chart>

In my controller

$scope.piePoints = [{"Other domains": 70, "foo.com": 30, "bar.com": 100}];
$scope.pieColumns = [
    {"id": "Other domains", "type": "pie"},
    {"id": "foo.com", "type": "pie"},
    {"id": "bar.com", "type": "pie"}
];

As a result, it draws only Other domains as 100%, since it does not see other entries. But it shows all three coulmns in the legend.

[irfan]

I'm creating columns dynamicly after an ajax call, so I applied something like following

$scope.pieColumns = [];   // empty the stack
// loop for each object
var tmp = {}; 
tmp.id = domain.replace('.', '');
tmp.name = domain;
tmp.type = "pie";
$scope.pieColumns.push(tmp);
// end of loop

Im creating coulmns dynamically from ajax response, so, my objects become like:

$scope.piePoints = [{"Other domains": 70, "foocom": 30, "barcom": 100}];
$scope.pieColumns = [
    {"id": "Other domains", "name": "Other domains", "type": "pie"},
    {"id": "foocom", "name": "foo.com", "type": "pie"},
    {"id": "barcom", "name": "bar.com", "type": "pie"}
];

Works good, but keep in mind this is a work around.

I believe this bug should be fixed.