CODEWITHSUNDEEP
chart.js
Martin
Martin

Reputation: 22760

ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart

We have an issue where we can not overlay multiple graph types on top of each other with ChartJS 2.9.4 . We have narrowed this down specifically to HorizontalBar chart types.

I can't see what's wrong with the script code below, but the ChartJS persists in not showing anything when any line type is added. The current dual horizontalBar work perfectly.

Also frustratingly ChartJS seems to show by default to show no errors or notice information at all in any way to the console.

Solution attempts :

Aim:

enter image description here

Code:

<script>
    Chart.platform.disableCSSInjection = true;
    var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: ["Mar 2017","Mar 2016","Mar 2015","Mar 2014","Mar 2013","Mar 2012","Mar 2011"],
                datasets: [
                    {
                        type: "line",
                        label: "Visits",
                        data: ["3", "4", "1", "5", "6","0"],
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: true
                    },
                    {
                        label: "Applicants",
                        data: ["2","4","5","8","9","4","3"],
                        backgroundColor: "#436B94",
                        borderWidth: 0
                    },
                    {
                        label: "Intakes",
                        data: ["1","1","0","1","3","0","1"],
                        backgroundColor: "#C40500",
                        borderWidth: 0
                    }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: false,
                        ticks: {
                            stepSize: 1
                        }
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            }
        }
    );
</script>

<div class='graphbox'>
     <h3>Applicants & Intakes over time</h3>
     <canvas id="historicChart"></canvas>
</div>

How can I achieve this?

Upvotes: 1

Views: 2706

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

They fixed this issue in v3 so upgrading to that is 1 solution, the other one is downgrading to version 2.8, in a git issue on their repo someone posted a workaround but that only works till version 2.8.

V3: HorizontalBar has been removed as a type, use bar chart instead and set the index axis to y in your options

Example:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        type: 'line',
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    indexAxis: 'y'
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

V2 solutions, for if stuck on v2 with plugin support To achieve this in 2.8 you will have to specify your data as objects and specify the x and y coordinates

Example:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    datasets: [{
      label: "Clients Signed",
      data: [2, 0, 3, 5, 1, 3, 6, 5, 3, 10]
    }, {
      label: "Quota",
      data: [{
        x: 2,
        y: 'Q2 2015'
      }, {
        x: 2,
        y: 'Q3 2015'
      }, {
        x: 2,
        y: 'Q4 2015'
      }, {
        x: 2,
        y: 'Q1 2016'
      }, {
        x: 2,
        y: 'Q2 2016'
      }, {
        x: 2,
        y: 'Q3 2016'
      }, {
        x: 2,
        y: 'Q4 2016'
      }, {
        x: 2,
        y: 'Q1 2017'
      }, {
        x: 2,
        y: 'Q2 2017'
      }, {
        x: 2,
        y: 'Q3 2017'
      }],
      type: 'line'
    }],
    labels: ["Q2 2015", "Q3 2015", "Q4 2015", "Q1 2016", "Q2 2016", "Q3 2016", "Q4 2016", "Q1 2017", "Q2 2017", "Q3 2017"]
  },
  options: {
    barPercentage: 1.0,
    categoryPercentage: 1.0
  }
});
<body>
  <div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
  </div>
  <script src="https://npmcdn.com/[email protected]/dist/Chart.bundle.min.js"></script>
</body>

Git issue: https://github.com/chartjs/Chart.js/issues/4096

Upvotes: 1

Related Questions