с3 рендерится по-разному в разных браузерах

Question

У меня проблема с отображением графиков в различных браузерах. Это с Chrome - где все хорошо. Chrome

А это от Edge и Firefox Edge и Firefox

Что я заметил, так это то, что gerated html для chrome отличаются от края и firefox соответственно. Из-за ограничений по символу я не мог вставить обе html структуры здесь. Поэтому мне кажется, что c3 работает по-разному в зависимости от браузера.

Но есть Javascript Код:

function ShowPieChart(chartData, chartId) {
       
        var columns = [];
        var counter = 0;

        var arrayOfSplitedChartId = chartId.match(/[A-Z][a-z]+/g);
        if (arrayOfSplitedChartId[arrayOfSplitedChartId.length - 1] === "Details") {

            showAxe = true;
            categories = chartData.ComparisonSettings;
            var copyOfChartData = Object.assign({}, chartData);

            for (i = 0; i < chartData.Legend.length; i++) {
                var column = [];

                column.push(chartData.Legend[i]);

                if (chartData.ValuesForDetails[i] !== undefined) {
                    for (j = 0; j < chartData.ValuesForDetails[i].length; j++)
                        column.push(chartData.ValuesForDetails[i][j]);
                }
                columns.push(column);
            }
            if (chartId === 'chartLeadStateDetails') {

                CountPercentOfRedLeads(chartData);
                RenderAvgDurationEscalationLevelChart(copyOfChartData);
                //RenderBarChartForEscalationLevelsInPeriod(copyOfChartData);
            }
            if (chartId === 'chartLeadEditDetails') {

                RenderBarChartForProcessingTime(copyOfChartData);
            }
        } else {
            for (i = 0; i < chartData.Legend.length; i++) {
                columns.push([chartData.Legend[i], chartData.Values[i]]);
            }
        }


        var  colorPattern = ['#01adee', '#444444', '#707070', '#026590'];

        if (chartId === 'chartLeadState' || chartId === 'chartLeadStateDetails') {
            colorPattern = ['#01b051', '#ffc102', '#c10001', '#707070'];
        }

        var chart = c3.generate({
            bindto: '#' + chartId,
            data: {
                columns: columns,
                type: 'pie'
            },
            interaction: {
                enabled: false
            },
            pie: {
                label: {
                    format: function (value, ratio, id) {
                        return value;
                    }
                }
            },
            tooltip: {
                show: false
            },
            color: {
                pattern: colorPattern
            },
            size: settings.ChartSizes.PieChart,
            legend: {
                position: 'right',
                item: {
                    onclick: function (d) {
                        counter++;
                        if (counter === 1) {
                            chart.hide();
                            chart.show(d);
                        } else {
                            chart.show();
                            counter = 0;
                        }
                    }
                }
            }
        });
    }

Кто-нибудь знает, в чем проблема? Спасибо за ваши ответы заранее!