Develop Reference

Amcharts5: legend errors in multiline chart

I am using amchart5 to render some multi line data and I have some issues with how the data is being rendered.
I cannot add currency symbols to the labels of the y-axis
I cant turn the labels of the x-axis so they are more vertical rather than horizontal
The preview will not show any lines
How can I resolve this?
See image:
Javascript
<script type="text/javascript">
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("fundChartLine");
root.numberFormatter.setAll({
numberFormat: "#,###.##00",
});
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root),
Amdg.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none"
}));
cursor.lineY.set("visible", false);
// Define data
var data = {{ line_chart_data| safe }}
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
// Create Y-axis
let yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
// Create X-Axis
/*var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0.2,
renderer: am5xy.AxisRendererX.new(root, {}),
categoryField: "chart_dates"
})
);
xAxis.data.setAll(data);*/
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
groupData: true,
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 30
})
})
);
xAxis.get("dateFormats")["day"] = "MM/dd";
xAxis.get("periodChangeDateFormats")["day"] = "MMMM";
xAxis.data.setAll(data);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/
function createSeries(name, field) {
var series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
categoryXField: "chart_dated_dt",
stacked: false
//legendLabelText: "[{fill}]{category}[/]",
//legendValueYText: "[bold {fill}]ZAR{valueY}[/]"
})
);
series.strokes.template.setAll({
strokeWidth: 2,
//strokeDasharray: [2,1]
});
series.fills.template.setAll({
fillOpacity: 0.5,
visible: false
});
series.data.setAll(data);
//series.labels.template.set("visible", false);
//series.ticks.template.set("visible", false);
console.log(series)
}
chart.topAxesContainer.children.push(am5.Label.new(root, {
text: "Performance",
fontSize: 30,
fontColor: '#e40505',
fontWeight: "500",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
paddingTop: 0,
paddingBottom: 20,
}));
createSeries("Average Contributions", "average_contrib");
createSeries("Average Contributions + Interest", "average_totals");
createSeries("Median Contributions", "median_contrib");
createSeries("Median Contributions + Interest", "median_totals");
createSeries("Your Contributions", "user_contrib");
createSeries("Your Contributions + Interest", "user_totals");
//var legend = chart.children.push(am5.Legend.new(root, {}));
//legend.data.setAll(chart.series.values);
var legend = chart.bottomAxesContainer.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
useDefaultMarker: true,
paddingTop: 10,
paddingBottom: 20,
layout: am5.GridLayout.new(root, {
maxColumns: 3,
fixedWidthGrid: true
})
}));
legend.data.setAll(chart.series.values);
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
/*var scrollbarX = am5.Scrollbar.new(root, {
orientation: "horizontal"
});*/
var scrollbarX = am5xy.XYChartScrollbar.new(root, {
orientation: "horizontal",
height: 50
});
//chart.bottomAxesContainer.children.push(scrollbarX);
/*let sbxAxis = scrollbarX.chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0.2,
renderer: am5xy.AxisRendererX.new(root, {
opposite: false,
strokeOpacity: 0
}),
categoryField: "chart_dates"
})
);*/
let sbxAxis = scrollbarX.chart.xAxes.push(
am5xy.DateAxis.new(root, {
groupData: true,
groupIntervals: [{ timeUnit: "year", count: 1 }],
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
opposite: false,
strokeOpacity: 0
})
})
);
let sbyAxis = scrollbarX.chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
let sbseries = scrollbarX.chart.series.push(
am5xy.LineSeries.new(root, {
xAxis: sbxAxis,
yAxis: sbyAxis,
valueYField: "user_totals",
valueXField: "chart_dated_dt",
})
);
sbseries.strokes.template.setAll({
strokeWidth: 2,
//strokeDasharray: [2,1]
});
sbseries.data.setAll(data);
chart.set("scrollbarX", scrollbarX);
console.log(sbseries.data.values[0]["user_totals"])
console.log(sbseries.data.values[0]["chart_dated_dt"])
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
root._logo.dispose();
chart.appear(1000, 100);
}); // end am5.ready()
I've looked at the docs and at some questions here and still stuck-

For the currency I added the currency symbol within the number formatter:
root.numberFormatter.setAll({
numberFormat: "'ZAR '#,###.##00",
tooltipNumberFormat: "'ZAR '#,###.##00",
I didn't figure out how to handle the formatting of the legend but what I did instead was change the date data from a Category value with a string to a an actual which allowed me to change the axis into a date one. Amcharts naturally handles the formatting of this in such a way that my problem disappeared and it also fit my long terms data goals for the chart. The category was a story gap.
The preview had isues with my date compile. I noticed in the code when converting the date I was simply making the date object but not actually getting the time. By using the the get_time i was able to properly render the x-axis. This issue aslo affected number 2.
for (let i = 0; i < data.length; i++) {
data[i]["chart_dated_dt"] = new Date(data[i]["chart_dated_dt"]).getTime();
}
Full code:
<script type="text/javascript">
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("fundChartLine");
root.numberFormatter.setAll({
numberFormat: "'ZAR '#,###.##00",
tooltipNumberFormat: "'ZAR '#,###.##00",
});
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root),
Amdg.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none"
}));
cursor.lineY.set("visible", false);
// Define data
var data = {{ line_chart_data| safe }}
for (let i = 0; i < data.length; i++) {
data[i]["chart_dated_dt"] = new Date(data[i]["chart_dated_dt"]).getTime();
}
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
// Create Y-axis
let yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0.1,
renderer: am5xy.AxisRendererY.new(root, {})
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
maxDeviation: 0.1,
groupData: true,
groupIntervals: [
{ timeUnit: "month", count: 1 }
],
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
}),
tooltip: am5.Tooltip.new(root, {})
})
);
xAxis.get("dateFormats")["day"] = "MM/dd";
xAxis.get("periodChangeDateFormats")["day"] = "MMMM";
xAxis.data.setAll(data);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/
function createSeries(name, field) {
var series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
valueXField: "chart_dated_dt",
stacked: false,
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{valueY}",
})
})
);
series.strokes.template.setAll({
strokeWidth: 2,
//strokeDasharray: [2,1]
});
series.fills.template.setAll({
fillOpacity: 0.5,
visible: false
});
series.data.setAll(data);
}
chart.topAxesContainer.children.push(am5.Label.new(root, {
text: "Performance",
fontSize: 30,
fontColor: '#e40505',
fontWeight: "500",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
paddingTop: 0,
paddingBottom: 20,
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis
}));
cursor.lineY.set("visible", false);
createSeries("Average Contributions", "average_contrib");
createSeries("Average Contributions + Interest", "average_totals");
createSeries("Median Contributions", "median_contrib");
createSeries("Median Contributions + Interest", "median_totals");
createSeries("Your Contributions", "user_contrib");
createSeries("Your Contributions + Interest", "user_totals");
var legend = chart.bottomAxesContainer.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
useDefaultMarker: true,
paddingTop: 10,
paddingBottom: 20,
layout: am5.GridLayout.new(root, {
maxColumns: 3,
fixedWidthGrid: true
})
}));
legend.data.setAll(chart.series.values);
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
var scrollbarX = am5xy.XYChartScrollbar.new(root, {
orientation: "horizontal",
height: 50
});
let sbxAxis = scrollbarX.chart.xAxes.push(
am5xy.DateAxis.new(root, {
groupData: true,
groupIntervals: [
{ timeUnit: "month", count: 1 }
],
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
opposite: false,
strokeOpacity: 0
})
})
);
let sbyAxis = scrollbarX.chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
let sbseries = scrollbarX.chart.series.push(
am5xy.LineSeries.new(root, {
xAxis: sbxAxis,
yAxis: sbyAxis,
valueYField: "user_totals",
valueXField: "chart_dated_dt",
})
);
sbseries.strokes.template.setAll({
strokeWidth: 2,
//strokeDasharray: [2,1]
});
sbseries.data.setAll(data);
chart.set("scrollbarX", scrollbarX);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
sbseries.appear(1000, 100);
console.log(chart.series)
console
root._logo.dispose();
chart.appear(1000, 100);
}); // end am5.ready()
</script>

Filling JSON content from database

I tried for hours before asking you for help. I'm so sorry for wasting your time. But please help me, I'm really hungry to learn. I'm sorry for my bad english.
https://www.amcharts.com/demos/column-chart-images-top/
I am working on a project with MVC entities(Mysql). I want to fill the contents of this chart with A1(string) and A2(int) fields of table A.
Thank You.
am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("Personel_Grafik");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none"
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "name",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
xRenderer.grid.template.set("visible", false);
var yRenderer = am5xy.AxisRendererY.new(root, {});
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
extraMax: 0.1,
renderer: yRenderer
}));
yRenderer.grid.template.setAll({
strokeDasharray: [2, 2]
});
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true,
categoryXField: "name",
tooltip: am5.Tooltip.new(root, { dy: -25, labelText: "{valueY}" })
}));
series.columns.template.setAll({
cornerRadiusTL: 5,
cornerRadiusTR: 5
});
series.columns.template.adapters.add("fill", (fill, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add("stroke", (stroke, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
// Set data
var data = [
{
name: "John",
value: 35654,
bulletSettings: { src: "https://www.amcharts.com/lib/images/faces/A04.png" }
},
{
name: "Damon",
value: 65456,
bulletSettings: { src: "https://www.amcharts.com/lib/images/faces/C02.png" }
},
{
name: "Patrick",
value: 45724,
bulletSettings: { src: "https://www.amcharts.com/lib/images/faces/D02.png" }
},
{
name: "Mark",
value: 13654,
bulletSettings: { src: "https://www.amcharts.com/lib/images/faces/E01.png" }
}
];
series.bullets.push(function () {
return am5.Bullet.new(root, {
locationY: 1,
sprite: am5.Picture.new(root, {
templateField: "bulletSettings",
width: 50,
height: 50,
centerX: am5.p50,
centerY: am5.p50,
shadowColor: am5.color(0x000000),
shadowBlur: 4,
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowOpacity: 0.6
})
});
});
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()
#Personel_Grafik {
width: 100%;
height: 265px;
}
<div id="Personel_Grafik2"></div>

Change highcharts data label position

This is my jsfiddle link http://jsfiddle.net/bb1m6xyk/1/
I want that all my labels like my data: 0 etc are positioned at the base and in center of each zone.
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {
title: {
text: 'Percent'
}
},
plotOptions: {
area: {
enableMouseTracking: false,
showInLegend: false,
stacking: 'percent',
lineWidth: 0,
marker: {
enabled: false
},
dataLabels: {
className:'highlight',
enabled: true,
formatter: function () {
console.log(this);
return this.point.myData
}
}
}
},
series: [{
name: 'over',
color: 'none',
data: overData
}, {
id: 's1',
name: 'Series 1',
data: data,
showInLegend: true,
zoneAxis: 'x',
zones: zones
}]
});
Is this possible? I tried it using className on dataLabels but it doesn't take that into effect.
Any help is appreciated.

There are a few ways to render labels on a chart.
The Renderer
Live example: http://jsfiddle.net/11rj6k6p/
You can use Renderer.label to render the label on the chart - this is a low level approach but it gives you full control how the labels will be rendered. You can loop the zones and set x and y attributes of the labels, e.g. like this:
const labels = ['l1', 'l2', 'l3', 'l4', 'l5']
function drawLabels() {
const zonesLabels = this.zonesLabels
const series = this.get('s1')
const { yAxis, xAxis } = series
const y = yAxis.toPixels(0) - 20 // -20 is an additional offset in px
series.zones.reduce((prev, curr, i) => {
if (curr.value !== undefined) {
const x = (xAxis.toPixels(prev.value) + xAxis.toPixels(curr.value)) / 2
if (!zonesLabels[i]) {
zonesLabels.push(
this.renderer.label(labels[i], x, y).add().attr({
align: 'center',
zIndex: 10
})
)
} else {
zonesLabels[i].attr({ x, y })
}
}
return curr
}, { value: series.dataMin })
}
Then set the function on load - to render the labels, and on redraw - to reposition the labels if the chart size changed.
chart: {
type: 'area',
events: {
load: function() {
this.zonesLabels = []
drawLabels.call(this)
},
redraw: drawLabels
}
},
The annotations module
Live example: http://jsfiddle.net/a5gb7aqz/
If you do not want to use the Renderer API, you can use the annotations module which allows to declare labels in a chart config.
Add the module
<script src="https://code.highcharts.com/modules/annotations.js"></script>
Map zones to the labels config object
const labels = ['l1', 'l2', 'l3', 'l4', 'l5']
function annotationsLabels() {
const zonesLabels = []
zones.reduce((prev, curr, i) => {
zonesLabels.push({
text: labels[i],
point: {
x: (prev.value + curr.value) / 2,
y: 0,
xAxis: 0,
yAxis: 0
}
})
return curr
}, { value: 0 })
return zonesLabels
}
Set the annotations options
annotations: [{
labels: annotationsLabels(),
labelOptions: {
shape: 'rect',
backgroundColor: 'none',
borderColor: 'none',
x: 0,
y: 0
}
}],
Data labels and a new series
Live example: http://jsfiddle.net/wpk1495g/
You can create a new scatter series which will not respond to mouse events and it won't be visible in the legend. The labels can be displayed as data labels.
Map zones to series points
const labels = ['l1', 'l2', 'l3', 'l4', 'l5']
function seriesData() {
const points = []
zones.reduce((prev, curr, i) => {
points.push( {
x: (prev.value + curr.value) / 2,
y: 50,
dataLabels: {
enabled: true,
format: labels[i]
}
})
return curr
}, { value: 0 })
return points
}
Set the series options in the chart config
, {
type: 'scatter',
enableMouseTracking: false,
showInLegend: false,
data: seriesData(),
zIndex: 10,
color: 'none',
dataLabels: { style: { textOutline: false }, x: 0, y: 0 }
}
Output

C3 js : large axis label

For example:
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
rotate: 25
}
}
}
})
;
and it looks like
How can I hide the long title while keeping the ability for the user to see the full name (maybe when hovering the mouse). Or maybe better way?

You can change the text with the tick.format configuration, but actually getting the value of the text because these are category values is a bit of a PITA, see the solution below:
the tick.format function shortens the axes label text (and this is carried over into the bar chart tooltip too)
the .onrendered function adds title elements to the axes labels that show the full axes label as a basic tooltip when you mouseover them
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
rotate: 25,
format: function (d) {
var catName = this.api.categories()[d];
if (catName.length > 20) {
catName = catName.slice(0,20)+"…";
}
return catName;
}
},
}
},
onrendered: function () {
var self = this;
d3.select(this.config.bindto)
.selectAll(".c3-axis-x .tick text")
.each(function (d) {
var title = d3.select(this).select("title");
if (title.empty()) {
title = d3.select(this).append("title");
}
title.text (self.api.categories()[d]);
})
;
}
});
http://jsfiddle.net/ajh0q2e7/

ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2

I'm using chart.js (V2) to try to build a bar chart that has more information available to user without having to hover over or click anywhere. I've provided two examples of how I hope to edit my chart.
Two edited versions of what I hope to achieve
As can be seen, I hope to place (somewhere), some extra information outside of the labels. I had hope that by adding '\n' to the labels I might have been able to get what I was looking for similar to option A.
Some edited code is provided blow:
var barChartData = {
labels: playerNames,
datasets: [{
label: 'Actual Score/Hour',
backgroundColor: "rgba(0, 128, 0,0.5)",
data: playerScores
}, {
label: 'Expected Score/Hour',
backgroundColor: "rgba(255,0,0,0.5)",
data: playerExpected
}]
};
function open_win(linktosite) {
window.open(linktosite)
}
canvas.onclick = function(evt){
var activePoints = myBar.getElementsAtEvent(evt);
console.log(activePoints);
linktosite = 'https://www.mytestsite.com/' + activePoints[1]['_model']['label'];
open_win(linktosite);
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title:{
display:true,
text:"Player Expected and Actual Score per Hour"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: false,
}],
yAxes: [{
stacked: false
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.textAlign = "center";
Chart.helpers.each(this.data.datasets.forEach(function (dataset) {
Chart.helpers.each(dataset.metaData.forEach(function (bar, index) {
// console.log("printing bar" + bar);
ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
}),this)
}),this);
}
}
}
});
// Chart.helpers.each(myBar.getDatasetMeta(0).data, function(rectangle, index) {
// rectangle.draw = function() {
// myBar.chart.ctx.setLineDash([5, 5]);
// Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
// }
// }, null);
};
At this point I'd be satisfied with having the extradata anywhere on the bar. Any help would be appreciated. Thanks~

Chart.js v2.1.5 allows for multi-line labels using nested arrays (v2.5.0 fixes it for radar graphs):
...
data: {
labels: [["Jake", "Active: 2 hrs", "Score: 1", "Expected: 127", "Attempts: 4"],
["Matt", "Active: 2 hrs", "Score: 4", "Expected: 36", "Attempts: 4"]],
...
However, this does mean that you will have to pre-calculate the label values.

var config = {
type: 'line',
data: {
labels: [["January","First Month","Jellyfish","30 of them"], ["February","Second Month","Foxes","20 of them"], ["March","Third Month","Mosquitoes","None of them"], "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 40, 80, 81, 56, 85, 45],
backgroundColor: "rgba(255,99,132,0.2)",
}, {
label: "My Second dataset",
data: [40, 80, 21, 56, 85, 45, 65],
backgroundColor: "rgba(99,255,132,0.2)",
}]
},
scales : {
xAxes : [{
gridLines : {
display : false,
lineWidth: 1,
zeroLineWidth: 1,
zeroLineColor: '#666666',
drawTicks: false
},
ticks: {
display:true,
stepSize: 0,
min: 0,
autoSkip: false,
fontSize: 11,
padding: 12
}
}],
yAxes: [{
ticks: {
padding: 5
},
gridLines : {
display : true,
lineWidth: 1,
zeroLineWidth: 2,
zeroLineColor: '#666666'
}
}]
},
spanGaps: true,
responsive: true,
maintainAspectRatio: true
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<div class="myChart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>
</div>
If a label is an array as opposed to a string i.e. [["June","2015"], "July"] then each element is treated as a separate line. The appropriate calculations are made to determine the correct height and width, and rotation is still supported.
charJS version 2.7.2 used
this also works in https://github.com/jtblin/angular-chart.js

If you are using Chart.js v2.7.1, the above solution might not work.
The solution that actually worked for us was adding a small plugin right in the data and options level:
const config = {
type: 'bar',
data: {
// ...
},
options: {
// ...
},
plugins: [{
beforeInit: function (chart) {
chart.data.labels.forEach(function (label, index, labelsArr) {
if (/\n/.test(label)) {
labelsArr[index] = label.split(/\n/)
}
})
}
}]
};
A full description of how to fix this issue can be found here.

With Chart.js v2.1, you can write a chart plugin to do this
Preview
Script
Chart.pluginService.register({
beforeInit: function (chart) {
var hasWrappedTicks = chart.config.data.labels.some(function (label) {
return label.indexOf('\n') !== -1;
});
if (hasWrappedTicks) {
// figure out how many lines we need - use fontsize as the height of one line
var tickFontSize = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontSize, Chart.defaults.global.defaultFontSize);
var maxLines = chart.config.data.labels.reduce(function (maxLines, label) {
return Math.max(maxLines, label.split('\n').length);
}, 0);
var height = (tickFontSize + 2) * maxLines + (chart.options.scales.xAxes[0].ticks.padding || 0);
// insert a dummy box at the bottom - to reserve space for the labels
Chart.layoutService.addBox(chart, {
draw: Chart.helpers.noop,
isHorizontal: function () {
return true;
},
update: function () {
return {
height: this.height
};
},
height: height,
options: {
position: 'bottom',
fullWidth: 1,
}
});
// turn off x axis ticks since we are managing it ourselves
chart.options = Chart.helpers.configMerge(chart.options, {
scales: {
xAxes: [{
ticks: {
display: false,
// set the fontSize to 0 so that extra labels are not forced on the right side
fontSize: 0
}
}]
}
});
chart.hasWrappedTicks = {
tickFontSize: tickFontSize
};
}
},
afterDraw: function (chart) {
if (chart.hasWrappedTicks) {
// draw the labels and we are done!
chart.chart.ctx.save();
var tickFontSize = chart.hasWrappedTicks.tickFontSize;
var tickFontStyle = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
var tickFontFamily = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
var tickLabelFont = Chart.helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
chart.chart.ctx.font = tickLabelFont;
chart.chart.ctx.textAlign = 'center';
var tickFontColor = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].fontColor, Chart.defaults.global.defaultFontColor);
chart.chart.ctx.fillStyle = tickFontColor;
var meta = chart.getDatasetMeta(0);
var xScale = chart.scales[meta.xAxisID];
var yScale = chart.scales[meta.yAxisID];
chart.config.data.labels.forEach(function (label, i) {
label.split('\n').forEach(function (line, j) {
chart.chart.ctx.fillText(line, xScale.getPixelForTick(i + 0.5), (chart.options.scales.xAxes[0].ticks.padding || 0) + yScale.getPixelForValue(yScale.min) +
// move j lines down
j * (chart.hasWrappedTicks.tickFontSize + 2));
});
});
chart.chart.ctx.restore();
}
}
});
and then
...
data: {
labels: ["January\nFirst Month\nJellyfish\n30 of them", "February\nSecond Month\nFoxes\n20 of them", "March\nThird Month\nMosquitoes\nNone of them", "April", "May", "June", "July"],
...
Note - we assume that the maximum content of one line will fit between the ticks (i.e. that no rotation logic is needed. I'm sure it's possible to incorporate rotation logic too, but it would be a tad more complicated)
You should format the tooltips to not show the x axis label, or format it to show a shorter version of the label.
Fiddle - http://jsfiddle.net/m0q03wpy/