'How to draw comparison of two mixed bar charts in chart.js?

So, i have this graphic by chart.js: http://jsfiddle.net/wdxk1nsb/1/ there is no problems, but now i want to compare this bars like this: http://jsfiddle.net/kyo3bqzh/ or here:

var data = {
  labels: ["1_jan", "2_jan", "3_jan"],
            datasets: [
              {
            type: 'bar',
            label: 'fees',
            data: [-5,-5,-6],
            backgroundColor: 'yellow',
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
            stack: 1
          },
          {
            type: 'bar',
            label: 'net revenue',
            data: [20,32,20],
            backgroundColor: 'pink',
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
            order: 1,
            stack: 1
          },
          {
            type: 'line',
            label: 'net revenue',
            data: [20,32,20],
            backgroundColor: 'pink',
            borderColor: 'black',
            fill: false,
            pointRadius: 8,
            pointHoverRadius: 8,
            bezierCurve: false,
            order: 2,
            stack: 1
          },
          {
            type: 'bar',
            label: 'refunds',
            data: [-1,-5,-6],
            backgroundColor: 'lightblue',
            borderColor: 'black',
            fill: false,
            pointRadius:6,
            pointHoverRadius: 6,
            bezierCurve: false,
            stack: 1
          },
          {
            type: 'bar',
            label: 'taxes',
            backgroundColor: 'blue',
            data: [-1,-5,-6],
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
            stack: 1
          },
          
          
          
          
          
        {
            type: 'bar',
            label: 'fees',
            data: [-10,-10,-16],
            backgroundColor: 'yellow',
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
          stack: 2
          },
          {
            type: 'bar',
            label: 'net revenue',
            data: [30,40,50],
            backgroundColor: 'pink',
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
            order: 1,
            stack: 2
          },
          {
            type: 'line',
            label: 'net revenue',
            data: [30,40,50],
            backgroundColor: 'pink',
            borderColor: 'black',
            fill: false,
            pointRadius: 8,
            pointHoverRadius: 8,
            bezierCurve: false,
            order: 2,
            stack: 2
          },
          {
            type: 'bar',
            label: 'refunds',
            data: [-10,-14,-19],
            backgroundColor: 'lightblue',
            borderColor: 'black',
            fill: false,
            pointRadius:6,
            pointHoverRadius: 6,
            bezierCurve: false,
            stack: 2
          },
          {
            type: 'bar',
            label: 'taxes',
            backgroundColor: 'blue',
            data: [-10,-12,-21],
            borderColor: 'black',
            fill: false,
            pointRadius: 6,
            pointHoverRadius: 6,
            bezierCurve: false,
            stack: 2
          }
            ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
        legend: {
          display: false,
        },
        tooltips: {
          intersect: true,
          mode: 'x',
        },
        responsive: true,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0,
          },
          plugins: {
            title: {
              display: true,
              text: 'title',
            },
          },
        },
        scales: {
          xAxes: [
            {
              stacked:true,
              gridLines: {
                display: false,
              },
              ticks: {
                autoSkip: true,
                maxTicksLimit: 9,
                maxRotation: 0,
                minRotation: 0,
                padding: 20,
              },
            },
          ],
          yAxes: [
            {
              stacked:true,
              gridLines: {
                drawBorder: false,
              },
              ticks: {
                fontSize: 14,
                fontFamily: 'IBM Plex Sans',
                padding: 10,
                beginAtZero:true
              },
            },
          ],
        }
      }
});

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>
<canvas id="myChart" style="height: 300px"></canvas>

For comparison and grouping i tried using stack property. The problem here is the line chart, i want to draw this line chart like on this pic: expected_result And when i hovering over any column of a pair of columns, I want to see the information of both columns in the tooltip.

How can i do this?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to draw comparison of two mixed bar charts in chart.js?

Sources

Related Questions