C3: Chart not displayed when using bindto

[deusebio]

Hi!

I have just started to use c3 and found it very useful and nice. However I'm experiencing a problem when I refer to containers called other than graph. When I use graph, everything works nicely. However, as soon as I change the reference point of the container and of the bindto field, charts are not rendered anymore. I have also tried to pass to bindto the elements selected by getElementById or using d3, but in all the cases things do not work as soon as I change the name from anything different from chart.

I also noticed that the samples in the folder htdocs are not rendered as well. Is it a problem of my machine or is it an issue of the library?

Thanks for the help!

Enrico

[luiscape]

Hi there @deusebio, could you provide a code example? I've faced similar issues in the past and may be able to advise.

[manuelmazzuola]

I have this problem too.
http://jsfiddle.net/ztwjxa94/

[manuelmazzuola]

I have resolved, the property to use is bindto and not bindTo
http://jsfiddle.net/jk4zfuw8/

[missingdays]

Is this solved? As @manuelmazzuola stated, you need to set bindto, and not bindTo.
If you still experience this bug, can you please provide a code example?

[Bart-Holland]

same here!

The code I use:

el: '.panel-graph',
createGraph: function () {

        this.prepareCurve();

        var that = this,
            columns = this.getColumns();

        this.chart = c3.generate({
            bindto: this.el,
            color: {
                pattern: ['#FF0000', '#9AD2F6', '#4CA0D6', '#0A71B5']
            },
            data: {
                xs: {
                    'Fragility': 'x1',
                    'Waterstand': 'x2',
                    'Middel': 'x3',
                    'Extreem': 'x4'
                },
                columns: columns
            },
            axis: {
                x: {
                    tick: {
                        //fit: true,
                        values: this.ticks,
                        rotate: 60
                    },
                    label: {
                        text: 'Waterstand',
                        position: 'outer-center'
                    }
                },
                y: {
                    label: {
                        text: 'Kans',
                        position: 'outer-center'
                    }
                }
            },
            padding: {
                top: 15,
                right: 15,
                bottom: 20,
                left: 70
            },
            legend: {
                show: true,
                position: 'inset',
                inset: {
                    anchor: 'top-left',
                    x: 5,
                    y: 0,
                    step: undefined
                }
            },
            tooltip: {
                show: false
            }
        });
    }

I console logged the output of this.chart
This will result into:

element = div.panel-graph.c3 //when working
element = div.c3 //when not working

the element is there on the DOM before loading the script.
So no need to not place it in the element.

I tried just re render it when $('.panel-graph').html() is empty.
But it will be an endless loop.

[Bart-Holland]

trying to look into it. It seems that it might not be c3 but d3 creating errors.
As some other svg I use is being created with D3 also doesn't work,

[ceremcem]

Same problem here.

[valakhosravi]

same problem here.

[panthony]

The bindto using css class works.

For questions involving the interplay between C3.js and any other library (react, vuejs, ..) please use the Google Group at https://groups.google.com/forum/#!forum/c3js.

If there is a c3js error, please open a new issue with JSFiddle highlighting the issue.

Thank you!