Combo Bar Line Chart with Chart.js

user_13637294 0
Viewed 1518

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;
chart.js jquery javascript
2 Answers

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

user_34176170

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.

user_78285530
Related