Chart.js Stacked 100% plugin with Mixed chart

Problem

I was working with HappyOrNot API, and needed to display charts on SharePoint Online. One of the charts you have on HappyOrNot portal is a mixed chart with stacked bars and line, like this

I had earlier used Flot for my charting needs, but this time Chart.js seemed more appropriate. I soon, however found out that it doesn’t have built-in support for 100% height stacked charts, so my charts ended up looking like this.

Then I found a nice 100% stacked bar chart plugin for Chart.js and enabled it, still not good, now it took all datasets and calculated relative heights including the line dataset as well.

Time to modify plugin source code.

Solution

To make the story short, I just needed to ignore the specific dataset (line) from the relative height calculation.

First of all, add the following option to the line chart yAxes: stacked: false. This is used in the plugin code to determine not to set the min/max values to 0 and 100 respectively. My plugin modification also relies for the line dataset to have property type: ‘line’.

Modifying the index.js of the plugin by adding few small changes did the trick. You can view changes here.

Am I HappyOrNot with the end result? Definitely happy!