javascript - How to create a stacked graph using ChartJS - Stack Overflow

admin管理员组

文章数量:1401291

As of now I have successfully created a line graph using ChartJS. But I want to make it stacked graph.

Below is what I have till now:

define(['backbone'], function(Backbone)
{
    var fifthSubViewModel = Backbone.View.extend(
    {
        template: _.template($('#myChart5-template').html()),

        render: function(){
          $(this.el).html(this.template());
          var ctx = this.$el.find('#lineChart5')[0];
          var lineChart = new Chart(ctx, {
          type: 'line',
            data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                label: "Unavailable Unit",
                backgroundColor: "rgba(38, 185, 154, 0.31)",
                borderColor: "rgba(38, 185, 154, 0.7)",
                pointBorderColor: "rgba(38, 185, 154, 0.7)",
                pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.unavailThisYear
              }, {
                label: "Vacant Unit",
                backgroundColor: "rgba(3, 88, 106, 0.3)",
                borderColor: "rgba(3, 88, 106, 0.70)",
                pointBorderColor: "rgba(3, 88, 106, 0.70)",
                pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.vacThisYear 
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  scaleLabel: {
                    display: true,
                    labelString: 'Ine in $'
                  }
                }]
              }
            }
          });
        },
        initialize: function(){
            console.log("In the initialize function");
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
            this.render();
        }   
    });

    return fifthSubViewModel;
});

Currently, I am getting two line graph on a single chart. But I somehow want to make them stacked. I mean the second line graph starting point should be the place from where the first line graph. So, the area should not overlap. Is there any way I can tell that to my line chart to start from the value where the other line chart is ending so as to get a stacked graph.

Current Screenshot not stacked:

As of now I have successfully created a line graph using ChartJS. But I want to make it stacked graph.

Below is what I have till now:

define(['backbone'], function(Backbone)
{
    var fifthSubViewModel = Backbone.View.extend(
    {
        template: _.template($('#myChart5-template').html()),

        render: function(){
          $(this.el).html(this.template());
          var ctx = this.$el.find('#lineChart5')[0];
          var lineChart = new Chart(ctx, {
          type: 'line',
            data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                label: "Unavailable Unit",
                backgroundColor: "rgba(38, 185, 154, 0.31)",
                borderColor: "rgba(38, 185, 154, 0.7)",
                pointBorderColor: "rgba(38, 185, 154, 0.7)",
                pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.unavailThisYear
              }, {
                label: "Vacant Unit",
                backgroundColor: "rgba(3, 88, 106, 0.3)",
                borderColor: "rgba(3, 88, 106, 0.70)",
                pointBorderColor: "rgba(3, 88, 106, 0.70)",
                pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.vacThisYear 
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  scaleLabel: {
                    display: true,
                    labelString: 'Ine in $'
                  }
                }]
              }
            }
          });
        },
        initialize: function(){
            console.log("In the initialize function");
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
            this.render();
        }   
    });

    return fifthSubViewModel;
});

Currently, I am getting two line graph on a single chart. But I somehow want to make them stacked. I mean the second line graph starting point should be the place from where the first line graph. So, the area should not overlap. Is there any way I can tell that to my line chart to start from the value where the other line chart is ending so as to get a stacked graph.

Current Screenshot not stacked:

• javascript
• backbone.js
• graph
• charts
• chart.js

Share Improve this question Follow edited Aug 24, 2016 at 15:52 Unbreakable asked Aug 24, 2016 at 15:45 UnbreakableUnbreakable 8,1322424 gold badges109109 silver badges191191 bronze badges 7

• Have you tried setting stacked: true next to your scaleLabel property? – juvian Commented Aug 24, 2016 at 16:09
• No. I am new to all this so I don't know about it. – Unbreakable Commented Aug 24, 2016 at 16:11
• Shall I put scaleLabel : true in both line chart configuration? Kindly guide – Unbreakable Commented Aug 24, 2016 at 16:12
• Well, documentation says you should put yAxes: [{ scaleLabel: { display: true, labelString: 'Ine in $' }, stacked: true }] . Not sure what display would that make – juvian Commented Aug 24, 2016 at 16:14
• Do you mind pointing me to the link. I would really appreciate it. Thanks! – Unbreakable Commented Aug 24, 2016 at 16:15

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6

According to the docs of latest chartjs version, you need to set the stacked property to true in the axis you want to stack them. So in your case it would be:

       options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Ine in $'
              },
              stacked: true
            }]
          }
        }

For more information go to ChartJs Docs

本文标签： javascriptHow to create a stacked graph using ChartJSStack Overflow