How to display two different chart modal in one-CodePudding

I am creating the chart as you see below:

So I can display the charts separately but I cannot display both of the charts on the same chart line.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>

<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>

<script>
        var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];

        new Chart("statisticChart", {
            type: "line",
            data: {
                labels: xValues,
                datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "rgba(25,162,242,1)",
                    borderColor: "rgba(2, 92, 145, 1)",
                    data: yValues
                }]
            },
            options: {
                legend: { display: false },
                scales: {
                    yAxes: [{ ticks: { min: 6, max: 16 } }],
                }
            }
        });
        var barColors = ["#19A2F2"];

        Chart("statisticChart", {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: "World Wine Production 2018"
                }
            }
        });
    </script>

</body>
</html>

So could you please have a look? Besides I also care about css, so I would like to display the second chart with the color #19A2F2, thanks in advance.

CodePudding user response：

Chart.js supports mixed charts - which involves just using one Chart instance of course. All you need to do is take the datasets objects of your two individual charts and put those in an array assigned to the Charts' data.datasets property.

For example:

var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];

new Chart("statisticChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
        type: "line",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(25,162,242,1)",
        borderColor: "rgba(2, 92, 145, 1)",
        data: yValues,
        fill: false
      },
      {
        type: "bar",
        backgroundColor: "#19A2F2",
        data: yValues
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 6,
          max: 16
        }
      }],
    },
    title: {
      display: true,
      text: "World Wine Production 2018"
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>