score:2
you can adjust the bodylines.foreach
loop to alter the value it shows like so:
bodylines.foreach(function(body, i) {
let [label, value] = body[0].split(': ');
value = `£${value.split('.')[0]}`
innerhtml += '<tr><td><div class="tooltip">' + `${label}: ${value}` + '</div></td></tr>';
});
const options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: 'invoicable',
data: [120000.5, 190000.7, 30000.2, 50000.3, 20000.9, 30000.1],
bordercolor: 'pink',
backgroundcolor: 'pink',
}]
},
options: {
locale: 'en-en',
plugins: {
tooltip: {
// disable the on-canvas tooltip
enabled: false,
external: function(context) {
// tooltip element
let tooltipel = document.getelementbyid('chartjs-tooltip');
// create element on first render
if (!tooltipel) {
tooltipel = document.createelement('div');
tooltipel.id = 'chartjs-tooltip';
tooltipel.innerhtml = '<table></table>';
document.body.appendchild(tooltipel);
}
// hide if no tooltip
const tooltipmodel = context.tooltip;
if (tooltipmodel.opacity === 0) {
tooltipel.style.opacity = 0;
return;
}
// set caret position
tooltipel.classlist.remove('above', 'below', 'no-transform');
if (tooltipmodel.yalign) {
tooltipel.classlist.add(tooltipmodel.yalign);
} else {
tooltipel.classlist.add('no-transform');
}
function getbody(bodyitem) {
return bodyitem.lines;
}
// set text
if (tooltipmodel.body) {
const titlelines = tooltipmodel.title || [];
const bodylines = tooltipmodel.body.map(getbody);
let innerhtml = '<thead>';
titlelines.foreach(function(title) {
innerhtml += '<tr><th>' + title + '</th></tr>';
});
innerhtml += '</thead><tbody>';
bodylines.foreach(function(body, i) {
let [label, value] = body[0].split(': ');
value = `£${value.split('.')[0]}`
innerhtml += '<tr><td><div class="tooltip">' + `${label}: ${value}` + '</div></td></tr>';
});
innerhtml += '</tbody>';
let tableroot = tooltipel.queryselector('table');
tableroot.innerhtml = innerhtml;
}
const position = context.chart.canvas.getboundingclientrect();
const bodyfont = chart.helpers.tofont(tooltipmodel.options.bodyfont);
// display, position, and set styles for font
tooltipel.style.opacity = .8;
tooltipel.style.position = 'absolute';
tooltipel.style.left = position.left + window.pagexoffset + tooltipmodel.caretx + 'px';
tooltipel.style.top = position.top + window.pageyoffset + tooltipmodel.carety + 'px';
tooltipel.style.font = bodyfont.string;
tooltipel.style.padding = tooltipmodel.padding + 'px ' + tooltipmodel.padding + 'px';
tooltipel.style.pointerevents = 'none';
}
}
}
}
}
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
const chart = new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Manipulating data point in chart.js external tooltip
- line chart with {x, y} point data displays only 2 values
- chart.js scatter chart - displaying label specific to point in tooltip
- chart js tooltip how to control the data that show
- Move tooltip further from data point for Chart.js?
- Add all data in the tooltip of Chart JS
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- ChartJS: Draw vertical line at data point on chart on mouseover
- Chart JS: Ignoring x values and putting point data on first available labels
- Chartjs - Insert additional data into chart tooltip
- Add a text as tooltip for each point on a line chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart.js tooltip at any point on the chart
- Using chart js version 3, how to add custom data to external tooltip?
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- How to show tooltip value of all data falling on the same axis in chart js?
- ng2-Chart: can we show the tooltip data of pie chart on load?
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- How to show tooltip only when data available in chart js?
- Chart.js How can I embed additional values to each data point in radar chart
- How do I destroy/update Chart Data in this chart.js code example?
- Show label for every data point in line chart
- getting additional value fields from data source for dx.chartjs doughnut chart
- concatenate on tooltip from data array in chart js
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Chartjs Bar Chart showing old data when hovering
- ChartJS - Different color per data point
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
More Query from same tag
- Is it possible to define data attributes for each dataset value in a Chart.js chart?
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- Chart.Js Doughnut not calculating JSON data properly
- ChartJs how can I move bar into new group?
- Chart.js - tooltips issue with multiple charts
- How to add data to chart.js with a for loop
- What happened to generateLegend() in chartjs 3.0?
- Chart.js Bubble chart with custome X-axis labels
- Making sure gridlines do not cross y-axis with ChartJS
- Displaying Charts in C# using ChartJS
- Format chart.js x labels
- How can I ensure that my charts diagram load every time I choose it from my dropdown?
- Chartjs is not showing charts in my Django project
- Chart JS Logarithmic x-axis
- Chart.js animation: onComplete event fired on hover
- Chart.js dataset controller 'null' when chart drawn
- ChartJS with Dynamic Colors
- how can i use inline plugin inner title for chart js?
- Hiding spaces with zero values in bar chart with chart.js
- Chart.js annotations in Vue.js break when defined in data ()
- Pass custom labels as an array to Chart JS Tool tip
- Counting string to plot a graph using chart.js and angular
- How can I hide legend text if it's zero?
- How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
- Chart.js will not render using vue.js until window resizes
- Implement Chart.js Plugin Meteor Project
- ChartJS - Show/hide data individually instead of entire dataset on bar/line charts
- Custom tooltip on Chart.js is coming undefined
- Chart.js - Line charts: draw points between grid lines
- Does ChartJS supports Jquery 3.4.1