CODEWITHSUNDEEP
javascriptchart.js
Mads Sander Høgstrup
Mads Sander Høgstrup

Reputation: 738

Chart.js hiding lable

Is there a way to hide the text at the bottom of every cylinder? Right now it annoys me that the text overlaps the other text, and this is why I want it gone. I have the information I need in the hover (black) box. Image

This is my code

newArrName is a arry build like this: [[name1, name1, ...], [name2, name2, ...]]

var newChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: newArrName,
            datasets: [{
                    label: 'Passed',
                    data: passArray,
                    backgroundColor: 'rgb(150,238,144)'
                },
                {
                    label: 'Failed',
                    data: failArray,
                    backgroundColor: 'rgb(204,0,0)'
                },
                {
                    label: 'Not Run',
                    data: notrunArray,
                    backgroundColor: 'rgb(0,109,204)'
                },
                {
                    label: 'Error',
                    data: errorArray,
                    backgroundColor: 'rgb(204,112,0)'
                },
                {
                    label: 'NA',
                    data: naArray,
                    backgroundColor: 'rgb(33,33,33)'
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: title
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            responsive: false,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 1,
                        min: 0,
                        autoSkip: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 5,
                        min: 0
                    }
                }]
            }

        }
    });

Upvotes: 1

Views: 30

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31361

You can set the ticks to display: false in your xAxes scale

Live example (V2):

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

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/2.9.4/Chart.js"></script>
</body>

V3 answer:

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

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.4.0/chart.js"></script>
</body>

Upvotes: 2

Related Questions