score:0
i was able to hide labels on the x-axis, while keeping the title in the tooltip by doing the following:
- in chart data:
labels: [""]
- in chart options, add
object.label = "tooltiptitle";
before the line specifying the values that should be returned
score:4
you can extend the chart to do this, like so
chart.types.bar.extend({
name: "baralt",
initialize: function(data){
chart.types.bar.prototype.initialize.apply(this, arguments);
var xlabels = this.scale.xlabels;
for (var i = 0; i < xlabels.length; i++)
xlabels[i] = '';
}
});
and call it like so
var mybarchart = new chart(ctx).baralt(data);
fiddle - http://jsfiddle.net/kq3utvnu/
thanks @samuele for pointing this out! for really long labels, you'll need to set the labels to something shorter and then set it back to the original ones (in the chart elements) so that no space is taken up below the x axis for the labels.
chart.types.bar.extend({
name: "baralt",
initialize: function(data){
var originallabels = data.labels;
data.labels = data.labels.map(function() { return '' });
chart.types.bar.prototype.initialize.apply(this, arguments);
this.datasets[0].bars.foreach(function(bar, i) {
bar.label = originallabels[i];
});
var xlabels = this.scale.xlabels;
for (var i = 0; i < xlabels.length; i++)
xlabels[i] = '';
}
});
fiddle - http://jsfiddle.net/nkbevuoe/
score:8
i think that's something you can do it with options setting in the latest versions of chartjs:
options: {
scales: {
xaxes: [
{
ticks: {
display: false
}
}
];
}
}
Source: stackoverflow.com
Related Query
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chartjs hide data point labels
- Hide labels on x-axis ChartJS
- ChartJS hide labels on small screen sizes
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- ChartJS multiple X axis and extra labels in y axis
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Hide all scale labels in chartjs
- ChartJS shows date, but not time, when displaying labels in time axis
- Hide labels from pie chart in chartjs
- ChartJS - Scale x axis labels from single days to multiple months
- Chartjs React Typescript moving x axis labels above chart
- How to hide the labels of graphs that are not toggled in ChartJS
- ChartJS have xAxes labels match data source
- ChartJS - x axis labels orientation
- ChartJS - aligning axis labels after rotation
- How to hide labels by two ticks? chartjs
- ChartJs x axis labels on waterfall chart
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- In Chart.js, how do I hide certain axis labels from a stacked bar chart?
- chartjs unlimited x axis labels
- Chart.js v2 hide dataset labels
- Hide points in ChartJS LineGraph
- How to set ChartJS Y axis title?
- How to hide y axis line in ChartJs?
- Hiding labels on y axis in Chart.js
- Is it possible in chartjs to hide certain dataset legends?
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Hide min and max values from y Axis in Chart.js
More Query from same tag
- char.js overlapping bar columns when using type: 'time'
- Unable to draw method in Chart.js, v2 can't be found
- Remove/Hide (display:none) the graphical chart in small-mobile view - JS chart
- Chart.js move x axis labels to the right
- How to use variable for data in Charts.js Pie Chart?
- Chart.js - Uncaught ReferenceError: chart is not defined
- Changing Dataset for a chart in angular 10
- How can I hide a chartjs chart?
- Printing a list by clicking chart Chart js + react
- How I can change the font-family of labels in the bar chart?
- ChartJS 2.0 differences in code help needed
- how do I use for loop inside script tag in ejs
- ChartJS - Graphic with multiple values on the same date
- How to apply each color to each dataset
- How to skip labels on x-axes?
- My page is not responsive when I run the with UWSGI
- cannot read property 'yyyx' of undefined
- How to limit number of displayed points in chart.js?
- Cannot get react-chartjs options to take effect
- Cannot access a variable declared outside a For loop (Javascript)
- How to emit an event with vue-chartjs?
- Ng2-Charts Linechart only showing first 2 two values
- React - render Chart.js chart based on user selection, after Ajax returns JSON
- Chart.JS custom y axis labels with text that has value
- How can I draw a line to the highest datapoint in chart js?
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- How to set a length difference in chart?
- How can I display a set amount of ticks on the Y Axis?
- Primefaces charts replaced by chartJS?
- angular-chart not showing Pie Chart