CODEWITHSUNDEEP
javascriptchart.js
daamiansz
daamiansz

Reputation: 57

How to remove the extra Y axis from a bar chart in chart.js

I am trying to make a bar chart in chart.js I found some ready-made example and I am trying to adapt it for my requirements. I don't know how to remove the double Y axis.

var densityCanvas = document.getElementById("densityChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var densityData = {
  label: 'Density of Planet (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: 'rgba(0, 99, 132, 0.6)',
  borderWidth: 0,
  yAxisID: "y-axis-density"
};

var gravityData = {
  label: 'Gravity of Planet (m/s2)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderWidth: 0,
  yAxisID: "y-axis-gravity"
};

var planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-density"
    }, {
      id: "y-axis-gravity"
    }]
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});

The code above provides this result.

enter image description here

Upvotes: 0

Views: 204

Answers (1)

Ravi Gajera
Ravi Gajera

Reputation: 179

checkout this example [JSFIDDLE](http://jsfiddle.net/p3g07d09/)

Upvotes: 2

Related Questions