top of page

[JavaScript] Draw a stacked graph with chart.js


What I want to do

Stacked graphs can be easily drawn by setting the 'stack:' option to the same value, but what I want to do is


  • There are data a and b

  • b is part of a

  • I want to emphasize the ratio of b to a


Of course, I can draw a normal stacked graph of b and a-b, but if a-b is not that important, that is, since I want to focus on the ratio of b to a, I want to draw a bar graph with the bottoms of a and b aligned.



How to do it

Set beginAtZero: true

return new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Graph"],
        datasets: [
          {
            label: "a",
            data: [a],
            backgroundColor: 'salmon',
          },        
          {
            label: "b",
            data: [b],
            backgroundColor: 'dodgerblue',
          },  
        ]
      },
      options: {
        scales: {
          x: {
            stacked: true,
          },
          y: {
            beginAtZero: true,
          },
        },
      },
    })

I can draw a graph like the one below


Recent Posts

See All

Comments


category

Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page