score:89
If you are using 2.0.0-beta2, you can use tooltip callback and return array of strings there.
tooltips: {
mode: 'single',
callbacks: {
afterBody: function(data) {
var multistringText = ['first string'];
// do some stuff
multistringText.push('another string');
return multistringText;
}
}
}
score:2
This worked for me. Just simply return an array of strings as labels in tooltips.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = "Line 1";
let label2 = "Line 2";
return [label, label2];
}
}
}
score:6
At this point in time, it's not possible to add line breaks to a tooltip or axis label. Right now the developers are discussion implementation options; the discussion can be found Allow wrapping in axis labels (issue on github).
score:9
You can use tooltips footer callback,it will also not render coloured square for each list.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = data.datasets[tooltipItem.datasetIndex].label;
let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ': ' + value;
},
footer: function(tooltipItems, data) {
return ['new line', 'another line'];
}
}
}
score:24
Actually all tool-tip callbacks support multiple lines of text, and you can use label
callback as usual. It renders data label as tool-tip text by default.
Quoted from documentation:
All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
Example code:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
if (tooltipItem.index % 2)
return ['Item 1', 'Item 2', 'Item 3'];
else
return 'Single line';
}
}
}
Source: stackoverflow.com
Related Query
- Chartjs Tooltip Line Breaks
- show label in tooltip but not in x axis for chartjs line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Chart js v2 tooltip callback line breaks
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS - Moving vertical line is display on top of tooltip
- ChartJS - line graph, position tooltip
- Set Tooltip over line Chartjs
- Display Chartjs tooltip values outside the canvas - multi line chart
- Unable to get Line Chart tooltip on ChartJS
- ChartJS - Display a single line data in tooltip
- ChartJS Line Charts - remove color underneath lines
- Chartjs change grid line color
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Dotted Line in ChartJS
- How to disable a tooltip for a specific dataset in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs tooltip is cut off when out of canvas
- chartjs show dot point on hover over line chart
- ChartJS add tooltip to a grouped bar chart
- ChartJs line chart repaint glitch while hovering over
- ChartJs custom tooltip position
- Chartjs Line Color Between Two Points
- How to render a vertical line on hover in chartjs
- ChartJS - Line Chart with different size datasets
- Show data dynamically in line chart - ChartJS
- In ChartJS is it possible to change the line style between different points?
More Query from same tag
- Error: Failed to create chart: can't acquire context from the given item
- Space between start and end of axis
- Zoom and Pan in react-chartjs-2
- Chart.js not displaying Django Rest API data
- Uncaught ReferenceError: Chart is not defined in Laravel mix
- How can I get access to the index of the highlighted dataset in Chart.js
- Show "No data" in angular-chartjs line graph
- Template variable injection in JS script
- How to remove color label on tool tip?
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- How to change background color in ng2-charts
- Chartjs Line chart options display increase and decrease percentage between each datapoint
- ChartJS legend background color while using point styles
- Map with pie chart and label
- Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
- Automatic label updates
- Custom label from using separate array in Chart JS
- Remove redundant legends on the chart using generateLabels with ChartJS v3
- Chart.js: How to display object data types on line graph correctly?
- Looping variables or array
- Iterate over query for use in Charts.js using Coldfusion
- Chart.js - Shift/Stagger labels horizontally (for x axis) instead of rotating
- How to set data values as labels in Chart.js with a Radar Chart
- chart.js how do we extract clicked var?
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- Is there anyway to remove the dots for points from angularjs charts
- Method inside Activate in Aurelia
- Chart js straight line (v1 vs v2)
- ChartJS keeps adding one day to X axis. I cannot find a reason. Any suggestion?
- How to create a chart with chartjs.org with data from an array?