How to Implement Mixed Charts using ChartJS ?

Last Updated : 05 Jun, 2023

In this article, we learn to implement mixed charts using JavaScript Chart JS plugin.

Mixed charts are also known as combination charts. They are a combination of two or more chart types like bar and line chart, column and line chart, area, column and line chart and so many combinations of chart types. They help in visually focusing on the difference between data sets and make it easy to see the relationship between each other’s information.

Uses of Mixed charts:

Shows the outliers very easily in a chart or graph.
It has the ability to show the relationship between different sets of data.
Data visualization becomes easy.

Approach:

In the HTML design, use the <canvas> tag for showing the mixed chart graph.
In the script part of the code, instantiate the ChartJS object by setting the type, data and options properties of the library.
Get the drawing context on the canvas by using the JavaScript getContext() method.
Set other attributes or properties as needed for the styling of datasets in the graph.
Make a combination of bar, and line graphs depending on the data available for code implementation.

CDN link:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>

Syntax:

new Chart($("#ID"), {
    type: '...',            
    data: { ... },               
    options: { ... }          
});

Example 1: The following code demonstrates a simple example of a bar and line chart. It displays a mixed chart showing sales of goods over a period of time (months of the year) at the bottom of the graph. The line chart shows the number of customers making sales shown in the vertical axis in the form of a bar chart.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Mixed Chart </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
<body> 
    <div> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Chart JS Bar and Line Mixed Chart </h3> 
        <div> 
            <canvas id="mixedChartID"></canvas> 
        </div> 
    </div> 
       
    <script> 
         var mychart = document.getElementById( 
             "mixedChartID").getContext("2d"); 
        // Mixed chart showing sales of goods  
        // over a period of time 
        new Chart(mychart, { 
            type: 'bar',             
            data: { 
                datasets: [{ 
                    label: 'Sales volume in lakhs', 
                    data: [60, 30,20,45, 50, 40], 
                    borderColor:"green", 
                    borderWidth:2                     
                    }, { 
                    label: 'no. of customers', 
                    data: [20, 10, 15, 31,40,35], 
                    type: 'line', 
                    fill:true, 
                    lineTension: 0.1, 
                      
                }],//end data sets 
                labels: ['January', 'February',  
                    'March', 'April','May','June'] 
            }//end data             
        }); 
    </script> 
</body> 
</html>

Output:

Example 2: The following code demonstrates a similar chart as explained in example 1 with another line chart. It shows a bar chart showing monthly sales data in lakhs and 2 line charts, one line chart showing expected sales and another line chart showing a profit curve over a period of time.( months in a year)

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Mixed Chart </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
<body> 
    <div> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Chart JS Bar and Line Mixed Chart </h3> 
        <div> 
            <canvas id="mixedChartID"></canvas> 
        </div> 
    </div> 
       
    <script> 
         var mychart = document.getElementById( 
             "mixedChartID").getContext("2d"); 
         
        new Chart(mychart, { 
            type: 'bar',    
            title: { 
                text: "Monthly Sales Data" 
            },             
            data: { 
                datasets: [{ 
                    label: 'Monthly Sales data in lakhs', 
                    data: [60, 30,20,45, 50, 40,35,77], 
                    type: 'bar', 
                    borderColor:"blue",                     
                    borderWidth:2                     
                    }, { 
                    label: 'Expected sales', 
                    data: [35, 15, 18, 38,45,35,27,65], 
                    type: 'line',     
                    borderColor:"green"                                         
                   }, 
                   { 
                    type:'line', 
                    data:[20,8,12,29,35,30,20,50], 
                    label: 'Profit', 
                    borderColor: "red", 
                    fill:true, 
                    backgroundColor: "pink", 
                    lineTension:0.2       
                     
                   } 
                ],//end data sets 
                labels: ['January', 'February', 'March', 'April', 
                      'May','June','July','August'] 
            }//end data             
        }); 
    </script> 
</body> 
</html>