[Chartjs]-How do I remove left-hand numeric values in Bar Chartjs?

by

1👍

✅

Try like this:

function myChart() {
  const densityCanvas = document.getElementById('myChart')

  Chart.defaults.global.defaultFontFamily = 'Segoe UI'
  Chart.defaults.global.defaultFontSize = 11

  const densityData = {
    label: '',
    data: [5427, 5243, 5514, 3933],
    backgroundColor: '#123ce1',
    borderWidth: 0,
    yAxisID: 'y-axis-density',
  }

  const gravityData = {
    label: '',
    data: [3.7, 8.9, 9.8, 3.7],
    backgroundColor: '#4f7afe',
    borderWidth: 0,
    yAxisID: 'y-axis-gravity',
  }

  const planetData = {
    labels: ['Mercury', 'Venus', 'Earth', 'Mars'],
    datasets: [densityData, gravityData],
  }

  const chartOptions = {

    scales: {
      xAxes: [{
        barPercentage: 1,
        categoryPercentage: 0.3,
      }, ],
      yAxes: [{
          id: 'y-axis-density',
        },
        {
          id: 'y-axis-gravity',
        },
      ],
    },
  }

  const barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          barPercentage: 1,
          categoryPercentage: 0.3,
        }, ],
        yAxes: [{
            id: 'y-axis-density',
            display: false
          },
          {
            id: 'y-axis-gravity',
            display: false
          },
        ],
      },
    },
  })
}
myChart()
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart"></canvas>

On this page there’s an example which shows the following setting to display individual y-axes:

yAxes: [{
   display: true
}]

Leave a comment