Error: <svg> attribute height: Expected length, "NaN"

Question

I am trying to generate some Pie charts with Angular Charts, but when I build the app I keep getting the errors:

Error: attribute height: Expected length, "NaN"

Error: attribute transform: Trailing garbage, "translate(60,NaN)"

I have tried everything but it didn't work Here is my js code:

 this.authService.getSurveyData().then(slist => {
            // STANDARD:
            this.defaultSurveys = [
            {
                title: "Consent Form",
                accepted: slist.data.consent.accepted,
                declined: slist.data.consent.declined,

                chartData: {
                    series: ["Consent Form"],
                    data: [
                        {
                            x: "Accepted",
                            y: [slist.data.consent.accepted]
                        },
                        {
                            x: "Declined",
                            y: [slist.data.consent.declined]
                        }
                    ]
                },
                g_chartData: {
                series: ["Consent Form"],
                    data: [
                        {
                            x: "Accepted",
                            y: [slist.data.consent.accepted]
                        },
                        {
                            x: "Declined",
                            y: [slist.data.consent.declined]
                        }
                    ]
                }
            },
            {
                title: "Demographics",
                accepted: slist.data.demographics.accepted,
                declined: slist.data.demographics.declined,

                chartData: {
                    series: ["Demographics"],
                    data: [
                        {
                            x: "Accepted",
                            y: [slist.data.demographics.accepted]
                        },
                        {
                            x: "Declined",
                            y: [slist.data.demographics.declined]
                        }
                    ]
                },
                g_chartData: {
                    series: ["Consent Form"],
                    data: [
                        {
                            x: "Accepted",
                            y: [slist.data.consent.accepted]
                        },
                        {
                            x: "Declined",
                            y: [slist.data.consent.declined]
                        }
                    ]
                }
            }];

        }, error => {
            this.errorMessage = error.message;
        });

        this.config = {
            "labels": false,
            "colors": ["#00bab3", "#3e5f6d"],
            "legend": {
                "display": false,
                "position": "right"
            },
            "innerRadius": 0,
            "lineLegend": "lineEnd",
    };

And my html code:

<!--Default Surveys-->
    <div class="data-stone">
        <div ng-repeat="survey in vm.defaultSurveys">
            <div class="chart2">
                <div class="chart-wrapper">
                    <div class="chart-header">
                        <h4>{{survey.title}}</h4>
                    </div>
                    <div class="chart-table">
                        <!--NUMBER OF USERS-->
                        <div class="chart-row">
                            <div class="chart-data-header chart-cell half-stand">
                                <label>NUMBER OF USERS</label>
                            </div>
                            <div class="chart-data-header chart-cell blankspace"></div>
                            <div class="chart-data-header chart-cell half-game">
                                <label>NUMBER OF USERS</label>
                            </div>
                        </div>
                        <!--ACCEPTED-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill sea">{{survey.accepted}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-sea">ACCEPTED</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill sea">{{survey.accepted}}</div>
                            </div>
                        </div>
                        <!--blank space-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="blank-divisor"></div>
                            </div>
                        </div>
                        <!---->
                        <!--DECLINED-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill forest">{{survey.declined}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-forest">DECLINED</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill forest">{{survey.declined}}</div>
                            </div>
                        </div>
                        <!--blank space-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="blank-divisor"></div>
                            </div>
                        </div>
                        <!---->
                        <!--TOTAL-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill water">{{survey.accepted + survey.declined}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-night">TOTAL</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill water">{{survey.accepted + survey.declined}}</div>
                            </div>
                        </div>
                        <!--CAKE CHARTS-->
                        <div class="chart-row space-recurrent">
                            <div class="chart-cell data-line cake-enclose">
                                <div class="cake">
                                    <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake"  height="120" width="120"></div>
                                </div>
                            </div>
                            <div class="chart-cell data-line porct">
                                <div class="cake-data">
                                    <div class="cake-subrow">
                                        <label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                        <div class="mini-pill sea"></div>
                                        <label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                    </div>
                                    <div class="cake-subrow">
                                        <label class="data-forest">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                        <div class="mini-pill forest"></div>
                                        <label class="data-sea">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-cell data-line cake-enclose">
                                <div class="cake">
                                    <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" style="width: 120px; height: 120px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="background"></div>
            </div>
            <div class="chart-divisor"></div>
        </div>
    </div>

When I build my app it generates a "svg" element (as expected) but shows no height whatsoever..

Maybe is there a way I can set up values for width / height in order the svg elements is properly generated?

See generated SVG (with wrong height value)

Bandwagon

instead of height : 120 try height : parseInt(120) while setting height value – Irreducible

Thank you for answering, but it still doesn't work :/ – Bandwagon

@LetieTecher did you solved this issue ? i am facing the same issue. i use angular-chart lib – Rotifer

Answer 1

By Seeing Code and by behavior of the bug i guess there is issue with selection of chart

 <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake"  height="120" width="120"></div>

ac-chart="'pie'" causes issue

So may be you can try with just using pie instead of 'pie'

Dove

Answer 2

I Faced the same error when i was trying to render the chart on a container which wasn't added to dom. So

Make sure your chart container is added to dom, before drawing the chart.

let container = document.createElement('div');
new ApexCharts(container, {}) // <----- NOW YOU GET THE MENTIONED ERROR. container is not in dom.
parentElement.appendChild(container); // <-- you add the chart container to dom. But it's late!

To fix it, make sure you First add the container to dom, then ask the appexcharts to render the chart :

parentElement.appendChild(container); // <-- First add the container to dom
new ApexCharts(container, {}) // <----- After that, render the chart.

Holdover