chart.js - charts.js stacked y-Axis

Question

Welcome To Ask or Share your Answers For Others

chart.js - charts.js stacked y-Axis

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

I'm looking for a solution with charts.js to have 4 y-axis which are stacked, but only one x-axis like I can create with plot in R. I found all information about several y-axis, but not stacked. Thank in advance for your help.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

377 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:23:36+0000

It is only possible with the current master code, after the next release of chart.js this will be possible with using normal CDN's

Example of current master branch code:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange, Black"],
    datasets: [{
        label: 'Dataset 1',
        data: [10, 30, 50, 20, 25, 44, -10],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: 'Dataset 2',
        data: ['ON', 'ON', 'OFF', 'ON', 'OFF', 'OFF', 'ON'],
        borderColor: 'blue',
        backgroundColor: 'blue',
        stepped: true,
        yAxisID: 'y2',
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left',
        stack: 'demo',
        stackWeight: 2,
        grid: {
          borderColor: 'red'
        }
      },
      y2: {
        type: 'category',
        labels: ['ON', 'OFF'],
        offset: true,
        position: 'left',
        stack: 'demo',
        stackWeight: 1,
        grid: {
          borderColor: 'blue'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://www.chartjs.org/dist/master/chart.js"></script>
</body>

Categories

chart.js - charts.js stacked y-Axis

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags