I am implementing line chart and I want to hide x'Axis label from line chart. I putted scaleFontSize: 0, , Than x'Axis and Y'axis labels are hide. But I want to hide only x'Axis label.
var lineOptions = {
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.4,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var lineData = {
labels: data,
datasets: [
{
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
}
]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
$scope.myNewChart = new Chart(ctx).Line(lineData, lineOptions);
I am taking reference from http://www.chartjs.org/docs/#line-chart-introduction . I want to hide only A'axis label.I have seen one link in stackoverflow Remove x-axis label/text in chart.js . But still I am not able to fixed. Thanks
You have to set scale.xLabels
property of your chart (instance), to an empty array - []
(hides x-axis gridlines) , or $scope.myNewChart.scale.xLabels.map(e => '')
(shows x-axis gridlines) , to hide x-axis labels.
Example
var lineOptions = { //Boolean - Whether grid lines are shown across the chart scaleShowGridLines: true, //String - Colour of the grid lines scaleGridLineColor: "rgba(0,0,0,.05)", //Number - Width of the grid lines scaleGridLineWidth: 1, //Boolean - Whether the line is curved between points bezierCurve: true, //Number - Tension of the bezier curve between points bezierCurveTension: 0.4, //Boolean - Whether to show a dot for each point pointDot: true, //Number - Radius of each point dot in pixels pointDotRadius: 4, //Number - Pixel width of point dot stroke pointDotStrokeWidth: 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius: 20, //Boolean - Whether to show a stroke for datasets datasetStroke: true, //Number - Pixel width of dataset stroke datasetStrokeWidth: 2, //Boolean - Whether to fill the dataset with a colour datasetFill: true, //Boolean - Re-draw chart on page resize responsive: true, //String - A legend template legendTemplate: "<ul class=\\"<%=name.toLowerCase()%>-legend\\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\\"background-color:<%=datasets[i].lineColor%>\\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" }; var lineData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] }] }; var getElement = document.getElementById("departuresChart2"); var ctx = getElement.getContext("2d"); myNewChart = new Chart(ctx).Line(lineData, lineOptions); myNewChart.scale.xLabels = []; //or set -> myNewChart.scale.xLabels.map(e => '');
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <canvas id="departuresChart2"></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.