CODEWITHSUNDEEP
javascriptcharts
PerryDaPlatypus
PerryDaPlatypus

Reputation: 773

Combine Bar and Line Chart in Javascript

First: Please Be Gentle, I am a newb with JS

I have a dashboard and I'm creating a chart with JS. I'm working from a template which already had some examples, so I am making things work by following what was already there.

I have a bar chart but I would like to add a line chart over top of it.

Is this possible? And if so, how?

I believe I'm using Chart.min.js (imported earlier in doc)

Here is my js (minus the data) to generate the chart.

<script>
window.onload = function(){
    // Bar Chart from barChartData
    var ctx = document.getElementById("chart-bar").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
    });
</script>

Hoping someone can help me out with this... I'm good with the HTML, Python, Flask, MySql, etc..... but js is still brand new, but I'm learning :-).

Upvotes: 3

Views: 322

Answers (1)

Tim Hallyburton
Tim Hallyburton

Reputation: 2929

Yes it is possible.

Chart.js lets you create charts with multiple datasets. The datasets don't have to be of the same type so you can create one dataset with lines and another one with bars like this:

datasets: [{
        // set one for your bars
        type: 'bar',
        data: [1, 2, 3, ... ] // your data for the bar chart
      }, {
        // set two for your lines
        type: 'line',
        data: [4, 5, 6, ... ] // your data for the line chart
      }]

and then create the chart with those datasets

window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        responsive : true,
        // other settings ...
      });

You can take some inspiration from my working example here

Upvotes: 1

Related Questions