Remove x-axis label/text in chart.js

Asked
Active3 hr before
Viewed126 times

8 Answers

remove
90%

Setting scaleShowLabels:false only removes the y-axis labels.,This preserves the tool tips also., Using Version: 2.1.6, this one did the trick. Also, without using global you could: options:{ legend: { display: false, }, – StackUnder Jul 12 '16 at 16:55 ,To avoid displaying labels in chart.js you have to set scaleShowLabels : false and also avoid to pass the labels:

UPDATE chart.js 2.1 and above

var chart = new Chart(ctx, {
   ...
   options: {
      scales: {
         xAxes: [{
            display: false //this will remove all the x-axis grid lines
         }]
      }
   }
});

var chart = new Chart(ctx, {
   ...
   options: {
      scales: {
         xAxes: [{
            ticks: {
               display: false //this will remove only the label
            }
         }]
      }
   }
});

To avoid displaying labels in chart.js you have to set scaleShowLabels : false and also avoid to pass the labels:

<script>
    var options = {
        ...
        scaleShowLabels : false
    };
    var lineChartData = {
        //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
        //labels : ["1","2","3","4","5","6","7"],
        ... 
    }
    ...
</script>
load more v
88%

The category axis, which is the default x-axis for line and bar charts, uses the index as internal data format. For accessing the label, use this.getLabelForValue(value). API: getLabelForValue,It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the ticks.callback method in the axis configuration.,index - the tick index in the ticks array.,ticks - the array containing all of the tick objects.

var chart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
      scales: {
         y: {
            ticks: {
               // Include a dollar sign in the ticks
               callback: function(value, index, values) {
                  return '$' + value;
               }
            }
         }
      }
   }
});
72%

If you only want to hide the X axis (and labels), this line should work : $chartVisitors->options([ 'scales' => [ 'xAxes' => [ 'display' => false ] ] ]);,$chartVisitors->options([ 'scales' => [ 'xAxes' => [ 'ticks' => [ 'display' => false ] ] ] ]);,I've confirmed it shows in the script on the page, but the labels still show. I can confirm that the minimalist method hides both axes well, but I need to show the Y axis labels and hide the X.,I'm having trouble hiding the x-axis labels using Chartjs library. I've attempted to add it in the options like so:

I'm having trouble hiding the x-axis labels using Chartjs library. I've attempted to add it in the options like so:

$chartVisitors->options([ 'scales' => [ 'xAxes' => [ 'ticks' => [ 'display' => false ] ] ] ]);

$chartVisitors - > options(['scales' => ['xAxes' => ['ticks' => ['display' => false]]]]);
load more v
65%

var myChart = new Chart(ctx, {
   type: 'bar',
   data: chartData,
   options: {
      scales: {
         xAxes: [{
            ticks: {
               autoSkip: false,
               maxRotation: 90,
               minRotation: 90
            }
         }]
      }
   }
});
75%

These pages outline the chart configuration options, and the methods and properties of Highcharts objects.,Feel free to search this API through the search bar or the navigation tree in the sidebar.,For modifying the chart at runtime. See the class reference.,For initial declarative chart setup. View as JSON.

Highcharts.setOptions({
});
load more v
40%

Each axis in AnyChart JavaScript graphs has its own labels settings. By default labels for all axes are enabled. You can enable or disable labels for the given axis using enabled method of labels() method:,You have a full control over the axis labels in format() parameter of labels() method. ,A line chart with labels enabled for both Y-axes and disabled for the X-axis is shown in the sample below.,One of the most useful features of label positioning is ability to show rotated labels. To rotate labels set the angle of rotation in the rotation() method:

Each axis in AnyChart JavaScript graphs has its own labels settings. By default labels for all axes are enabled. You can enable or disable labels for the given axis using enabled method of labels() method:

var labels = chart.xAxis().labels();
labels.enabled(false);
load more v
22%


<!DOCTYPE html>
<html>
<head>
<title>/Prototype.</title>
<style type="text/css">
BODY {
    width: 750PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                var id = location.search.match(/[?&]id=([^&]*)/)[1];
                
                $.post("xxx.php", {"id": id}, 
                function (data)
                {
                    console.log(data);
                     var date = [];
                    var users = [];

                    for (var i in data) {
                        date.push(data[i].date);
                        users.push(data[i].users);
                    }

                    var chartdata = {
                       labels:date ,
                        datasets: [
                            {
                                label: 'Users',
                                backgroundColor: 'rgba(55, 55, 55, 0.55)',
                                borderColor: 'rgba(255, 255, 255)',
                                hoverBackgroundColor: '#373636',
                                hoverBorderColor: '#666666',
				    pointColor: "rgba(220,220,220,1)",
                                data: users
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>
<!-- </html> -->
60%

One of that chart is a bar chart displaying data according to hours on the X-axis:,As you can see, we show labels only on some points so our customer asked us if there is a way to remove the marks corresponding to empty ticks.Unfortunately, I’ve not found any way to do it out of the box (no properties or callbacks that I could use to implement this feature).,Theses days, I’m working on a big Angular application that contains a lot of graph highly customized thanks to Chart.JS.,After looking for a long time, I’ve finally managed to do it, thanks to the plugins system that can be used in Chart.JS. The basic idea is pretty simple: we’ll just disable the standard ticks drawing and we’ll draw the ticks:

After looking for a long time, I’ve finally managed to do it, thanks to the plugins system that can be used in Chart.JS. The basic idea is pretty simple: we’ll just disable the standard ticks drawing and we’ll draw the ticks:

Chart.plugins.register({
	beforeDraw: function (chart) {
		const chartContext = chart.ctx;
		const hoursAxis = (<any>chart).scales['hours'];
		if (hoursAxis !== undefined) {
			const bottomY = (<any>chart).scales['one'].bottom;

			hoursAxis.options.gridLines.display = false;
			hoursAxis.ticks.forEach(function (label, index) {
				const xPosition = hoursAxis.getPixelForTick(index);

				chartContext.save();
				chartContext.beginPath();

				if (label !== '') {
					chartContext.moveTo(xPosition, bottomY - 5);
					chartContext.lineTo(xPosition, bottomY);
					chartContext.strokeStyle = 'rgba(90, 42, 83, 0.5)';
				}

				chartContext.lineWidth = 1;
				chartContext.stroke();
				chartContext.restore();
			});
		}
	}
});
load more v

Other "remove-undefined" queries related to "Remove x-axis label/text in chart.js"