score:2
Accepted answer
you can extend the chart to do this - you override the calculatexlabelrotation
method of the scale object.
preview(s)
script
chart.types.line.extend({
name: "linealt",
initialize: function() {
chart.types.line.prototype.initialize.apply(this, arguments);
var scale = this.scale;
var chart = this.chart;
scale.calculatexlabelrotation = function() {
var originallabelwidth = chart.helpers.longesttext(chart.ctx, scale.font, scale.xlabels);
var firstwidth = ctx.measuretext(scale.xlabels[0]).width;
var firstrotated = math.cos(chart.helpers.radians(scale.xlabelrotation)) * firstwidth;
scale.xlabelrotation = 45;
scale.endpoint -= math.sin(chart.helpers.radians(scale.xlabelrotation)) * originallabelwidth + 3;
scale.xscalepaddingleft = firstrotated + scale.fontsize / 2;
}
this.scale.fit();
}
});
and then
...
new chart(ctx).linealt(data);
fiddle - http://jsfiddle.net/vvlttjz4/
Source: stackoverflow.com
Related Query
- Tilting the labels of the x axis to some degrees in chart.js
- Chart Js, Style some ticks on the axis differently
- chart.js: How do I make the radar chart axis labels bigger?
- Time chart labels with some X axis labels using Chart js v3
- 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
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Making the labels responsive in chart js
- Using Chart.js - The X axis labels are not all showing
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Changing x axis labels in Chart.js line chart
- Line chart with large number of labels on X axis
- How to align Chart.JS line chart labels to the center
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to display the labels in doughnut chart using ng2 charts?
- ChartJS: Show all labels of a mixed chart in the tooltip
- Rotate 90 degrees clockwise the scaleLabel (no ticks or labels) on a Chart.js line chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- ChartJS: Remove padding to the right of chart caused by tick labels
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- Modify the labels in chart.js when I update the chart
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How to add labels for only some of the data point?
- Pie chart isn't loading, but the labels are
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- how to minimize x axis labels to day hours in chart js
- Chartjs React Typescript moving x axis labels above chart
More Query from same tag
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
- Creating dynamic object to reorganize API response using Typescript
- Why i lost my chart.js when i do a new render
- Chart.js: One function for multiple graphs
- How to extract ChartJs data and config properties
- Removing chart on click event produces 'removeHoverStyle' of null error
- Chartjs / Javascript - My function not returning array properly, but console logs okay
- Angular chart.js chart scale
- How to call back one js file from another js file?
- Chart.js turn off all y axis and toggle them on / off
- npm chart.js is big after minimization
- Chart.js . ASP . Legend Template
- Android WebView HTML5 canvas error
- Chart.js render in hidden Bootsrap tab
- Have text displayed instead of numerical values on y axis
- ChartJS dynamically adding values with jQuery array
- Chartjs: Double x axis not having the same gridline
- How to add background color for doughnut mid using chart,js
- Click events on Pie Charts in Chart.js
- ChartJS hover/tooltips: selecting the correct points in the datasets based on x-value
- How do I get a different label for each bar in a bar chart in ChartJS?
- graph data from a angular form to ChartJs
- Chart.js multiple series with same scale
- Stacked bars in Charts.js from a JSON list of objects
- How to draw border all the way around bar element
- How to hide some points inside my line graphic in React ChartJS 2?
- Chart.js Time series - x axis that change depending on timestamp
- Plot time on Y axis
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- Show "No data" in angular-chartjs line graph