score:4
chart.js uses canvas filltext for the tooltips in it's default tooltip function. filltext unfortunately doesn't support word wrapping.
so you'll have to write your own custom tooltip function. there again, the labels are also used for the x axis. the easiest way would be to use \b (it's just ignored in your axis filltext) and swap it out in your custom tooltip function.
preview
code
var mylinechart = new chart(ctx).bar(data, {
customtooltips: function (tooltip) {
var tooltipel = $('#chartjs-tooltip');
if (!tooltip) {
tooltipel.css({
opacity: 0
});
return;
}
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var re = new regexp('\b', 'g');
var innerhtml = '<span>' + parts[0].trim().replace(re, '<br/>') + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipel.html(innerhtml);
tooltipel.css({
opacity: 1,
left: tooltip.chart.canvas.offsetleft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsettop + tooltip.y + 'px',
fontfamily: tooltip.fontfamily,
fontsize: tooltip.fontsize,
fontstyle: tooltip.fontstyle,
});
}
});
with the following markup added (your tooltip wrapper)
<div id="chartjs-tooltip"></div>
and the following css (for positioning your tooltip)
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, -120%);
transform: translate(-50%, -120%);
}
and your labels would look like
labels: ["jan\bua\bry", "february", "mar\bch", "april", "may", "june", "july"],
with \b standing for breaks. note that you \n, \r, \t, \f... won't work if you don't want spaces in your x axis labels. if you actually want there to be spaces just use \n or something and change the regex accordingly
fiddle - http://jsfiddle.net/5h1r71g8/
Source: stackoverflow.com
Related Query
- How to make tool tip contents display on multiple lines
- How to display multiple y axis titles on seperate lines and rotated 90 degrees clockwise in chart.js
- How can I make two of my lines in Chart JS thicker
- How to display data labels outside in pie chart with lines in ionic
- Chart.js - How to display title in multiple lines?
- How to make the whole <canvas> element in Chart.js V3.7.0 display cursor as pointer on hover?
- I am using Chart.js and want to change the tool tip to display date format based on timestamp input
- how to customize tool tip while mouse go over bars on Chart js bar chart
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- How to make lines in line charts from ng2-charts straight lines?
- how to display multiple sum with chart js and laravel?
- How can I make small grid lines above ChartJS labels?
- How to make bar chart cover multiple labels?
- How to format tool tip as currency in piechart chartJS?
- Chart.JS: How to make sharp lines to smooth curved lines
- Chart.js how to display multiple labels on multi bar stacked chart
- How to display grid lines (without showing label) between each ticks?
- display various chart value and tool tip
- How can i display multiple years of data from 1 project in Chart.js?
- How to display multiple graphs in real time with chartjs
- How to make multiple stacked charts to share the same yAxis?
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- How to make multiple horizontal bar chartjs
- How to make one datefilter for multiple charts on one webpage?
- ChartJs How to display horizontal and vertical lines through the datasets points with their values on axes?
- How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?
- How to make dashed thick lines with dots in ChartJS ? Is it possible?
- Chart.js How can i make a horizontal lines like this?
- How to run Chart.js samples using source code
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
More Query from same tag
- Chart.js angular8 Y axis ticks
- How do I create multiple charts at the same page with angular?
- Chart.Js vers2 multiline to version 3
- How to change legend icon on hover Chartjs
- Highlight Line Series on legend hover
- Using Radar Chart inside react component
- Chart.js - Why the chart cannot rendered in a child component but in the father component can?
- Chartjs with Backbone
- Chartjs - legends take up too much space on mobile devices
- chart.js Radar shows 0 when value is 12
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart JS showing empty chart without any data
- yAxis labels are being cut off in ngEchars (Echarts)
- How to load an array of external data in QuickChart?
- Charts.Js with Asp.Net Webforms Does Not Work
- Hiding Chart.js labels in Angular6
- Chart.js displays the label in a weird font in IE8
- Adding multiple dataset and colors not being assigned in ng2-charts
- Chartjs Add-Ons
- ChartJS: Change the positions of the tooltips
- Switch chart.js data with button click
- How to set minimum value to Radar Chart in chart js
- Chartjs: Multiple data values for the same label
- Position Label under the Horizontal Bar
- How do I force Chart.js axes min and max with react-chartjs-2?
- Change labels colors for radar chart js
- Javascript chart one number step
- What can I do to ensure that my charts diagram reload every time I choose it from my dropdown?
- Creating a heart rate monitor
- Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly