score:17
you were using chartjs version 2.1.3 in your jsfiddle, which does not seem to handle multiline labels
you can use multilines labels with the following solutions:
var dates = [["some l-o-o-o-o-", "o-o-o-o-o-o-o-", "n-n-n-n-n-n-g-g-g-", "g-g-g-g label"], "ddd", ["eee", "fff", "ggg"], "hhh", "iii"];
you can replace a label by an array, and each element of the array will be considered as a new line (see jsfiddle): https://jsfiddle.net/cyuwxh3q/
if your labels are generated dinamically, you can split them with a plugin in your chart configuration :
type: 'bar',
data: {...},
options: {...},
plugins: [{
beforeinit: function (chart) {
chart.data.labels.foreach(function (value, index, array) {
var a = [];
a.push(value.slice(0, 5));
var i = 1;
while(value.length > (i * 5)){
a.push(value.slice(i * 5, (i + 1) * 5));
i++;
}
array[index] = a;
})
}
}]
this function will turn each label into an array of element which length is less or equal to the given value (here 5) (see jsfiddle) : https://jsfiddle.net/jhr5nm17/
those are two easy ways to handle long labels by replacing them by multiline labels, hope it helps.
Source: stackoverflow.com
Related Query
- How to fix bars in Chart.js with long labels
- How to prevent first/last bars from being cut off in a chart with time scale
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
- How to display data labels outside in pie chart with lines in ionic
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to add images to chart labels with vue-chartjs?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- Charts.js how to fix the height with more than 50 horizontal bars
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- How to add labels on top of the chart bar with Chart.js 2
- How to fix size of mixed chart with bubble chart in Chart.js?
- how to write labels along with data on top and bottom of each stack in bar chart
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to set data values as labels in Chart.js with a Radar Chart
- How can I create a long tail chart with chart.js
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js Bar Chart - how to chart bars from 0
- Chart.js how to show cursor pointer for labels & legends in line chart
- chart js how to fill legend box with colour
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- chartjs: How to plot multi-line chart with irregular intervals
- How to display inline values in a stacked bar chart with Chart.js?
- Chart.js - Draw bar chart with multiple labels
- Line chart with large number of labels on X axis
- How to align Chart.JS line chart labels to the center
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to display the labels in doughnut chart using ng2 charts?
- How to have solid colored bars in angular-chart bar chart
More Query from same tag
- Create a chart on a dynamically created canvas in Angular-chart.js
- Chart.js remove zero value sector in pie chart
- cartjs tooltips displays in the wrong place on a chart
- JavaScript ignore commas inside ChartJS data field pulled from csv that data has commas and is enclosed by double quotes
- How to pass model object to javascript function in asp.net Core
- How to use chartjs-plugin-trendline with react-chartjs-2
- .destroy() generating error 'window.myChart.destroy()' is not a function
- Remove background color in chartjs line chart
- Is there a way to let Chart.js to round up decimals?
- Adding Vertical scroll bar in a bar-chart (chartjs)
- Rotate left legend chartjs
- Chart.js Yaxis custom horizontal line and label
- chart js legend template
- In Chart.js I want to show dotted gridLines like in below image
- Average 2 Keys in ChartJS
- How to extract ChartJs data and config properties
- base chart slice color on series value?
- ChartJS - can't display all the items in the array
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chart js. How to change font styles for "labels" array?
- Chart.js color change of the data points
- Chart.JS Starting at 00:00am and ending at 23:59pm
- Obtain max value of y axis of line chart rendered with Chart.js
- How to filter hover on a chart in ChartJS?
- ChartJS: Limit label's length on an axis and show a tooltip on hover?
- Line formatting in Chart.js for vertical steps
- How to show different tooltips on charts (in columns)?
- Chartjs - destroy() does nothing
- Show base64 image next to canvas with charts.js
- Chart.js showing old chart on hover