score:3
This answer is for chartjs 1.X for an answer covering 2.X take a look at the great answer from @tabetomo https://stackoverflow.com/a/39706986/2737978
Using the same method as in the previous answer the only thing that needs to changed is the extension of the graph type. This time it is extending the line chart and the set-up is a little different as the Line charts scale is created in the build scale so this time it is buildScale
is overridden so that the custom scale is used and the new option overrideRotation
can be passed in. initialize
is also overridden but only so that the super initialize can be called and get the ball rolling on building the graph.
var helpers = Chart.helpers;
Chart.MyScale = Chart.Scale.extend({
calculateXLabelRotation: function() {
//Get the width of each grid by calculating the difference
//between x offsets between 0 and 1.
this.ctx.font = this.font;
var firstWidth = this.ctx.measureText(this.xLabels[0]).width,
lastWidth = this.ctx.measureText(this.xLabels[this.xLabels.length - 1]).width,
firstRotated,
lastRotated;
this.xScalePaddingRight = lastWidth / 2 + 3;
this.xScalePaddingLeft = (firstWidth / 2 > this.yLabelWidth + 10) ? firstWidth / 2 : this.yLabelWidth + 10;
this.xLabelRotation = 0;
if (this.display) {
var originalLabelWidth = helpers.longestText(this.ctx, this.font, this.xLabels),
cosRotation,
firstRotatedWidth;
this.xLabelWidth = originalLabelWidth;
//Allow 3 pixels x2 padding either side for label readability
var xGridWidth = Math.floor(this.calculateX(1) - this.calculateX(0)) - 6;
if (this.overrideRotation) {
this.xLabelRotation = this.overrideRotation;
cosRotation = Math.cos(helpers.radians(this.xLabelRotation));
// We're right aligning the text now.
if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
}
this.xScalePaddingRight = this.fontSize / 2;
this.xLabelWidth = cosRotation * originalLabelWidth;
} else {
//Max label rotate should be 90 - also act as a loop counter
while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)) {
cosRotation = Math.cos(helpers.radians(this.xLabelRotation));
firstRotated = cosRotation * firstWidth;
lastRotated = cosRotation * lastWidth;
// We're right aligning the text now.
if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
}
this.xScalePaddingRight = this.fontSize / 2;
this.xLabelRotation++;
this.xLabelWidth = cosRotation * originalLabelWidth;
}
}
if (this.xLabelRotation > 0) {
this.endPoint -= Math.sin(helpers.radians(this.xLabelRotation)) * originalLabelWidth + 3;
}
} else {
this.xLabelWidth = 0;
this.xScalePaddingRight = this.padding;
this.xScalePaddingLeft = this.padding;
}
},
});
Chart.types.Line.extend({
name: "MyLine",
initialize: function(data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
buildScale: function(labels) {
var self = this;
var dataTotal = function() {
var values = [];
self.eachPoints(function(point) {
values.push(point.value);
});
return values;
};
var scaleOptions = {
templateString: this.options.scaleLabel,
height: this.chart.height,
width: this.chart.width,
ctx: this.chart.ctx,
textColor: this.options.scaleFontColor,
offsetGridLines: this.options.offsetGridLines,
fontSize: this.options.scaleFontSize,
fontStyle: this.options.scaleFontStyle,
fontFamily: this.options.scaleFontFamily,
valuesCount: labels.length,
beginAtZero: this.options.scaleBeginAtZero,
integersOnly: this.options.scaleIntegersOnly,
calculateYRange: function(currentHeight) {
var updatedRanges = helpers.calculateScaleRange(
dataTotal(),
currentHeight,
this.fontSize,
this.beginAtZero,
this.integersOnly
);
helpers.extend(this, updatedRanges);
},
xLabels: labels,
font: helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
lineWidth: this.options.scaleLineWidth,
lineColor: this.options.scaleLineColor,
showHorizontalLines: this.options.scaleShowHorizontalLines,
showVerticalLines: this.options.scaleShowVerticalLines,
gridLineWidth: (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
showLabels: this.options.scaleShowLabels,
display: this.options.showScale,
overrideRotation: this.options.overrideRotation,
};
if (this.options.scaleOverride) {
helpers.extend(scaleOptions, {
calculateYRange: helpers.noop,
steps: this.options.scaleSteps,
stepValue: this.options.scaleStepWidth,
min: this.options.scaleStartValue,
max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
});
}
this.scale = new Chart.MyScale(scaleOptions);
},
});
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(20,20,220,0.2)",
strokeColor: "rgba(20,20,220,1)",
pointColor: "rgba(20,20,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(20,20,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(120,120,120,0.2)",
strokeColor: "rgba(120,220,120,1)",
pointColor: "rgba(120,120,120,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(120,120,120,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).MyLine(barChartData, {
overrideRotation: 90
});
}
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="canvas" height="150" width="300"></canvas>
score:2
Here's a slightly more hackier version (Quince's answer is better - the following may break if a future implementation of Chart.js does calculateXLabelRotation
differently)
The label rotation is calculated by progressively rotating the labels so that they fit between the vertical grid lines - the space between them is calculated using scale.calculateX(1) - scale.calculateX(0)
. We jump in at the right point to force the result of this calculation to be 0 (by making scale.calculateX
return the same value) - this in turn forces the rotation to progress to it's maximum (i.e. 90 degrees)
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var scale = this.scale;
var originalCalculateXLabelRotation = scale.calculateXLabelRotation;
var originalXScalePaddingLeft = scale.xScalePaddingLeft;
scale.calculateXLabelRotation = function () {
var originalCalculateX = scale.calculateX;
scale.calculateX = function () {
return 0;
}
originalCalculateXLabelRotation.apply(this, arguments);
scale.xScalePaddingLeft = originalXScalePaddingLeft;
scale.calculateX = originalCalculateX;
}
this.scale.fit();
}
});
and then
...
new Chart(ctx).LineAlt(data);
Fiddle - http://jsfiddle.net/gc5gdg7e/
score:6
It worked for me on version 3.1.0
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
x: {
ticks: {
maxRotation: 90,
minRotation: 90
}
}
}
}
})
score:11
for x axis use this
options: {
legend: {
display: false
},
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
and can filter the label with a for
loop:
arrayLabels.forEach((date, i) => {
let label = "";
if (i % step == 0 && fecha) {
label = moment(date, "DD/MM").format("DD MMM");
}
labels.push(label);
});
chartOptions.data.labels = labels;
score:172
If you are using chart.js 2.x, just set maxRotation: 90
and minRotation: 90
in ticks options. It works for me! And if you want to all x-labels, you may want to set autoSkip: false
. The following is an example.
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}]
}
}
});
Source: stackoverflow.com
Related Query
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart Js change text label orientation on Ox axis
- show label in tooltip but not in x axis for chartjs line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Change Axis Line color in Chart created using chart.js
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- change space between horizontal (grid) lines for line chart
- display vertical axis label in line chart using chart.js
- Chart Js reduce text size for label on X axis
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How do you set x and y axis and Title for a line chart using charts.js?
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- Show label for every data point in line chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- ChartJs: Is there a way to control the font options per line for a multiline axis label
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- How to change line chart data label to icon or image in chart.js
- Using custom dataformat in chart.js for Multi Axis Line Chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Legends for line charts in Chart.js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart JS - set start of week for x axis time series
- Chart js. How to change font styles for "labels" array?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
More Query from same tag
- Multiple stacked bar chart using ChartJs
- ChartJS - why is there a visual difference when displaying the same dataset alone or with more datasets?
- How to use segment property to color line / border color based on value in chart js?
- Align Chart JS Y-Axis dot with X-Axis value
- Eror: chart.min.js:13 Uncaught (in promise) Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused
- Chart.js styling questions
- My Chart.js Options referencing React state are being ignored
- ChartJS Arrays Acting as One Item
- get yLabel value onclick chart js
- Padding Between Pie Charts in chart js
- How do i make a new chart by pressing a button (chart.js)?
- How to get access to Chart instance related to current tooltip callback in Chart.js
- Charts js and laravel: Render chart after passing in json data
- Chart: Two bipolar bars below each other
- chart.js won't display the chart in IE
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- code works fine on jsfiddle but one function is not working on website
- Make chartjs pie chart wiyh dynamic data
- graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed
- ChartJs x-axis label to be in dateTime format issue: DD-MMM-YYYY, but displayed as MMM-YYYY-DD
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- Passing SQL results from controller to chart.js
- Trying to use axios, vuejs and a dummy api for my chartjs and googlecharts (get requests only)
- Add value to horizontal bar in chart.js
- Set fix values on y-axis vue-chartjs
- how to show data value on bar chart body rather than using tooltip?
- Calling data from outside of Chartjs code
- 'Chart.js' time chart not displaying properly
- Chart.js legend - split into two and display separately?