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
- chart.js bar chart color change based on value
- How to create a chart with chartjs.org with data from an array?
- How to show the chartjs bar chart data values labels as text?
- is there a way to change the dispaly of a date
- Can't find the chart.js v2 docs
- how does this javascript recolor the doghnut?
- Getting "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when using Chartjs inside react axios method
- Chart.js plotting two json datasets on a line chart
- chartjs Line chart Javascript
- How to change hours format to percentage in a Chart.js pie chart
- Chart.js Line chart Option does not disable gridlines
- Can't pass data to chart.js graph
- Using Chart.js client-side in Atlasboard
- Using loops to create data arrays
- How to add conditional logic on Chart.js config?
- Using Chart.js, how do I avoid having tooltips overlap?
- chartjs - How to access chart instance in a custom tooltip callback
- How to add font color in vue-chartjs
- why does my chart.js barograph order by whole numbers and then floats?
- Iterating through the same dataset in Chart.js
- Chart.js Change color of the values *inside* the bars of a Bar chart
- Execute onClick function on Custom Legend
- DevExtreme Exporter prints blank page
- showing values or percentages with chartjs in react
- Time scale formatting issues with chartjs, mostly unitStepSize
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- Chart.JS Time Axis Not Parsing
- Chart.js time series showing empty plot
- Limit numbers of labels on Chart.js in "smaller display only"
- chart js put meter square / superscript on y axis