Chartjs-Chart.js with line chart and bar chart – bar chart not rendered although the max value of it is shown

by

0👍

✅

Figured it, for some reason I had to swap the main type to be bar and then override the type in the dataset to be line as below:

activeUserChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: result.data.chart_labels,
                    datasets: [
                        {
                        type: "line",
                        label: 'Total Daily Active Users',
                        data: result.data.chart_data.active_user_data,
                        backgroundColor: [
                            'rgba(209, 0, 21, 0.2)'
                        ],
                        borderColor: [
                            'rgba(209, 0, 21,1)'
                        ],
                        borderWidth: 1
                    },
                        {
                            label: 'App Analysis',
                            data: result.data.chart_data.app_release_data,
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            borderColor: 'rgba(255, 255, 255, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                //stepSize: 1,
                                autoSkip: true
                            }
                        }]
                    }
                }
            });

Leave a comment