Chart JS Multi-Axis Example

chart-js-multi-axis-example.markdown

Chart JS Multi-Axis Example

This demo shows how you can use graph’s Chart JS in order to arrange four sets of stacked columns.

A Pen by Eliz on CodePen.

License.

index.html

<h1>Chart JS Multi-Axis</h1>
<div class="wrapper">
<canvas id="myChart"></canvas>
</div>

<h1>Chart JS Multi-Axis with suggestedMin, suggestedMax</h1>
<div class="wrapper">
<canvas id="myChart2"></canvas>
</div>

script.js

var data = {
    "datasets": [
      {
        "backgroundColor": "rgb(156, 39, 176)",
        "borderColor": "rgb(156, 39, 176)",
        "fill": false,
        "data": [
          10,
          120,
          80,
          134
        ],
        "id": "amount",
        "label": "Purchase amount (USD)",
				"yAxisID":"left"
      },
      {
        "backgroundColor": "rgb(39, 176, 200)",
        "borderColor": "rgb(39, 176, 200)",
        "fill": false,
        "data": [
          300,
          -1200,
          500,
          -340
        ],
        "id": "amount",
        "label": "Purchase amount (USD)",
				"yAxisID":"right"

      }
    ],
    "labels": [
      "2017-01-02",
      "2017-04-02",
      "2017-07-02",
      "2018-01-02"
    ]
  };
var options = {
    "elements": {
      "rectangle": {
        "borderWidth": 2
      }
    },
    "layout": {
      "padding": 0
    },
    "legend": {
      "display": true,
      "labels": {
        "boxWidth": 16
      }
    },
    "maintainAspectRatio": false,
    "responsive": true,
    "scales": {
      "xAxes": [
        {
          "gridLines": {
            "display": false
          },
          "scaleLabel": {
            "display": true,
            "labelString": "Date"
          },
          "stacked": false,
          "ticks": {
            "autoSkip": true,
            "beginAtZero": true
          },
          "time": {
            "tooltipFormat": "[Q]Q - YYYY",
            "unit": "quarter"
          },
          "type": "time"
        }
      ],
      "yAxes": [
        {
          "scaleLabel": {
            "display": true,
            "labelString": "Purchase amount (USD)"
          },
					"id": "left",
          "stacked": false,
          "ticks": {
            "beginAtZero": true
          }
        },
        {
          "scaleLabel": {
            "display": true,
            "labelString": "Purchase count"
          },
					"id": "right",
					"position": "right",
          "stacked": false,
          "ticks": {
            "beginAtZero": true
          }
        }
      ]
    },
    "title": {
      "display": false
    },
    "tooltips": {
      "intersect": false,
      "mode": "index",
      "position": "nearest",
      "callbacks": {}
    }
  }
var type = "line";

var myChart = new Chart(document.getElementById("myChart").getContext('2d'), {options, data, type});
var myChart2 = new Chart(document.getElementById("myChart2").getContext('2d'), {
	options: {
		...options,
		scales: {
			...options.scales,
			yAxes: [
					{
						"scaleLabel": {
							"display": true,
							"labelString": "Purchase amount (USD)"
						},
						"id": "left",
						"stacked": false,
						"ticks": {
							"beginAtZero": true,
							suggestedMin: -200,
							suggestedMax: 200
						}
					},
					{
						"scaleLabel": {
							"display": true,
							"labelString": "Purchase count"
						},
						"id": "right",
						"position": "right",
						"stacked": false,
						"ticks": {
							"beginAtZero": true,
							suggestedMin: -2000,
							suggestedMax: 2000
						}
					}
			]
		}
	},
	data,
	type
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

style.css

body, html{
  background: #181E24;
  padding-top: 10px;
}

.wrapper{
  width:80%;
  display:block;
  overflow:hidden;
  margin:0 auto;
  padding: 20px;
  background:#fff;
  border-radius:4px;
}

canvas{
  background:#fff;
  height:400px;
}

h1{
  font-family: Roboto;
  color: #fff;
  margin-top:50px;
  font-weight:200;
  text-align: center;
  display: block;
  text-decoration: none;
}