[Chartjs]-Charts.js stacked bar with polymer's wrapper chart-elements

by

1👍

✅

1) There one parethesis in excess in your 3rd background-color: 

backgroundColor: "rgba(237,86,27,0.5))",

should be:

backgroundColor: "rgba(237,86,27,0.5)",

2) You try to insert a data property in a data object, which is redundant.

3) You don’t have to define the type: 'bar' property because it is set by the name of the control .

4) The options object should be set separately, for the options attribute:

<dom-module id="column-chart">

    <template>
        <div>
            <chart-bar data="[[data]]" options="[[options]]"></chart-bar>
        </div>
    </template>

    <script>
        Polymer({
            is: 'column-chart',
            ready: function() {

                this.data = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                    {
                        label: 'Dataset 1',
                        backgroundColor: "rgba(5,141,199,0.5)",
                        data: [100, 110, 95, 100, 100, 102, 101],
                        stack: 1
                    }, 
                    {
                        label: 'Dataset 2',
                        backgroundColor: "rgba(80,180,50,0.5)",
                        data: [94, 96, 98, 94, 97, 97, 96],
                        stack: 1
                    }, 
                    {
                        label: 'Dataset 3',
                        backgroundColor: "rgba(237,86,27,0.5)",
                        data: [98, 97, 87, 85, 99, 84, 94],
                        stack: 1
                    }]
                }

                this.options = {
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }   
            }
        });
    </script>

</dom-module>

Leave a comment