[Simple Trick]-How to Combined Bar and line charts Using Chart.js?

In this article, we'll discuss how to create a mixed bar and line chart with different scales using Chart.js. First, it's important to know that you can indeed create a mixed chart with both bars and lines 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/[email protected]/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

BarchartwithlineDataobj: This object holds the data for the chart. It includes labels for the x-axis (months) and two datasets: one for projected sales as bars and another for actual sales as a line.

The "Projected sales" dataset is defined with red bars.

The "Actual Sales" dataset is defined with a blue line.

Each dataset contains corresponding data points for each month.

LinebarChartOptions: This object contains configuration options for the chart. It specifies responsiveness, legend position, and the title of the chart.

type: "bar": Specifies that the chart type is a bar chart.

data: BarchartwithlineDataobj: Specifies the data for the chart.

options: LinebarChartOptions: Specifies the options for configuring the appearance and behavior of the chart.

new Chart("barchartwithlinechartcanvas", chartData): Instantiates a new Chart.js chart on the canvas element with the id "barchartwithlinechartcanvas", using the configuration defined in the chartData object.

Above example create a mixed bar and line chart on the webpage, displaying both projected and actual sales data across months. The bars represent projected sales, while the line represents actual sales. The legend will be placed on the right side of the chart.

[Simple Trick]-How to Combined Bar and line charts Using Chart.js?

Combo Bar Line Chart with Chart.js Example

Codepen Editor

Read Similar Articles