In This article, we will discuss how we can Mixed Bar and Line chart with different scales using  Chart.js. First, let you know that it is possible to create a Bar and Line chart mixed chart in Chart js.

A combination chart is very useful for representing the data to the use, combination chart is a visualization that combines the features of multiple graph types in one graph for example we can combine a bar chart and the line chart. using that combination chart show the data using several bars and or lines, each of which represents a particular dataset.

A mix of bars and lines in the same graph can be useful when comparing values in different datasets since the mix provides a clear view of which dataset is high, lower, or equal.

Combo Bar Line Chart with Chart.js Example

Let’s understand with an example using the chart js, let’s I want to create a combination chart to compare the projected sales with the real sales for each month.

How to Combined Bar and line charts Using Chartjs

Our example below contains two series, in which the bars describe the projected sales for each month in a calendar year, and the line chart describes the real sales for the same months done by our company.

<!DOCTYPE html>
<html>
<head>
    <title>Createbar chart with Line Chart Using chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
    <div style="margin-left:5%;margin-right:5%">
        <canvas id="barchartwithlinechartcanvas" style="width:80%"></canvas>
    </div>
    <script>
        var BarchartwithlineDataobj = {
            labels: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "June",
                "July",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec"
            ],
            datasets: [
                {
                    label: "Projected sales",
                    backgroundColor: "red",
                    borderColor: "red",
                    borderWidth: 1,
                    data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125],
                    order: 1
                },
                {
                    label: "Actual Sales",
                    backgroundColor: "blue",
                    borderColor: "blue",
                    borderWidth: 1,
                    data: [0, 52, 94, 62, 12, 45, 110, 52, 39, 75,115,175],
                    type: 'line',//sepcify this dataset is for line chart
                    order: 0 //to set the linechart on top of barchart
                }
            ]
        };

        var LinebarChartOptions = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',//this option is used for place legend on the right side of bar chart
                }
            },
            title: {
                display: true,
                text: "Chart.js Bar Chart with Line Chart"
            }
        }

        window.onload = function () {
            var chartData = {
                type: "bar",
                data: BarchartwithlineDataobj,
                options: LinebarChartOptions
            }
            new Chart("barchartwithlinechartcanvas", chartData);
        };

    </script>

</body>
</html>

 Codepen Editor

The post [Simple Trick]-How to Combined Bar and line charts Using Chart.js? appeared first on Software Development | Programming Tutorials.



Read More Articles