CODEWITHSUNDEEP
javascriptjquerychart.js
jamesMandatory
jamesMandatory

Reputation: 91

Combo Bar Line Chart with Chart.js

My line chart is not showing on my chart.js at all. What piece of the puzzle am i missing here?

Also here is a fiddle that shows my code, you can see the bar graph displays as expected but the line chart does not. https://jsfiddle.net/c50dfw3g/1/

I have never used this type of chart before so I am not certain how exactly to set it up. Thanks in advance to all who assist.

var ctx = document.getElementById('myChart');
var config = {
    type: 'bar',
  options: {
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      var data = chart.data;
      var datasets = data.datasets;
      if (datasets.length) {
        for (var i = 0; i < datasets.length; ++i) {
            text.push('<li>');
            if (datasets[i].type=='line') {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          } else {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          }
          text.push(datasets[i].label);
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        type: "category",
        id: "axis-bar",
      }, {
        type: "time",
        id: "axis-time",
        display: false,
      }, ],
    },
  },
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: "Dataset1",
      type: "line",
      backgroundColor: "#0000FF",
      borderColor: "#0000FF",
      borderWidth: 1,
      fill: false,
      xAxisID: "axis-time",
      data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
    },{
      label: "Dataset2",
      type: "bar",
      backgroundColor: "#ff0000",
      borderColor: "#ff0000",
      borderWidth: 1,
      fill: true,
      xAxisID: "axis-bar",
      data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
    }]
  },

};

var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

Upvotes: 2

Views: 3668

Answers (2)

stuckCode6
stuckCode6

Reputation: 36

The issue is with the 'xAxisID' attributes.

You specify the x-axis id as: 'axis-bar' but then use a different id when specifying dataset 1 ('axis-time'), so it's not being plotted on the same graph.

Just use the same id in the datasets as you specify when defining the scale of the graph and you'll get both plots on the same chart and thus your desired result.

Upvotes: 1

drnugent
drnugent

Reputation: 1545

Try using the same X-axis for both data sets:

scales: {
  xAxes: [{
    type: "category",
    id: "axis-bar",
  }/* Commenting out the second axis, { 
    type: "time",
    id: "axis-time",
    display: true,
  }, */],
},

Now, we'll set the line dataset to use this X-axis:

datasets: [{
  label: "Dataset1",
  type: "line",
  backgroundColor: "#0000FF",
  borderColor: "#0000FF",
  borderWidth: 1,
  fill: false,
  xAxisID: "axis-bar",
  data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},

And here we go:

enter image description here

Upvotes: 1

Related Questions