score:2
You can put any custom/advance datas to dataset for example (imgUrls, productIds, imgDataset ) :
var chartdata = {
labels: ["Swimming", "Golf", "Soccer"],
datasets: [{
label: "Choices",
data: [4, 10, 6],
backgroundColor: ["#a19828", "#b15928", "#fb9a99"],
imgDataUrls:['img1','img2','img3'],
imgDataSet:'imgDataset',
productIds:['id1','id2','id3'],
}]
};
Then you can use datasetIndex, dataIndex in Tooltip Item Context to get your custom/advance datas.
// Index of the dataset the item comes from
datasetIndex: number,
// Index of this data item in the dataset
dataIndex: number,
https://github.com/chartjs/Chart.js/blob/master/docs/samples/tooltip/html.md
score:1
Dont know how you get your data so I assume you somehow get it together with your normal data. In this case you can add a custom property to the dataset and pass it to the tooltip. Then it will be available in your context of your external handler in the following namespace: context.tooltip.dataPoints[0].dataset[customPropertyName]
.
Then you can just create an image element and add it to the head:
titleLines.forEach(title => {
const tr = document.createElement('tr');
tr.style.borderWidth = 0;
const th = document.createElement('th');
th.style.borderWidth = 0;
const text = document.createTextNode(title);
th.appendChild(text);
// THIS BLOCK ADDED
const imageTh = document.createElement('th');
th.style.borderWidth = 0;
const image = document.createElement('img');
image.style = 'width:20px'
image.src = context.tooltip.dataPoints[0].dataset.url;
imageTh.appendChild(image);
tr.appendChild(th);
tr.appendChild(imageTh);
tableHead.appendChild(tr);
});
Fiddle: https://jsfiddle.net/Leelenaleee/xhrs2wvc/17/
Full code (since stack snipet doesnt seem to like creating the elements):
<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>
const getOrCreateTooltip = (chart) => {
let tooltipEl = chart.canvas.parentNode.querySelector('div');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)';
tooltipEl.style.borderRadius = '3px';
tooltipEl.style.color = 'white';
tooltipEl.style.opacity = 1;
tooltipEl.style.pointerEvents = 'none';
tooltipEl.style.position = 'absolute';
tooltipEl.style.transform = 'translate(-50%, 0)';
tooltipEl.style.transition = 'all .1s ease';
const table = document.createElement('table');
table.style.margin = '0px';
tooltipEl.appendChild(table);
chart.canvas.parentNode.appendChild(tooltipEl);
}
return tooltipEl;
};
const externalTooltipHandler = (context) => {
// Tooltip Element
const {
chart,
tooltip
} = context;
const tooltipEl = getOrCreateTooltip(chart);
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set Text
if (tooltip.body) {
const titleLines = tooltip.title || [];
const bodyLines = tooltip.body.map(b => b.lines);
const tableHead = document.createElement('thead');
titleLines.forEach(title => {
const tr = document.createElement('tr');
tr.style.borderWidth = 0;
const th = document.createElement('th');
th.style.borderWidth = 0;
const text = document.createTextNode(title);
th.appendChild(text);
// THIS BLOCK ADDED
const imageTh = document.createElement('th');
th.style.borderWidth = 0;
const image = document.createElement('img');
image.style = 'width:20px'
image.src = context.tooltip.dataPoints[0].dataset.url;
imageTh.appendChild(image);
tr.appendChild(th);
tr.appendChild(imageTh);
tableHead.appendChild(tr);
});
const tableBody = document.createElement('tbody');
bodyLines.forEach((body, i) => {
const colors = tooltip.labelColors[i];
const span = document.createElement('span');
span.style.background = colors.backgroundColor;
span.style.borderColor = colors.borderColor;
span.style.borderWidth = '2px';
span.style.marginRight = '10px';
span.style.height = '10px';
span.style.width = '10px';
span.style.display = 'inline-block';
const tr = document.createElement('tr');
tr.style.backgroundColor = 'inherit';
tr.style.borderWidth = 0;
const td = document.createElement('td');
td.style.borderWidth = 0;
const text = document.createTextNode(body);
td.appendChild(span);
td.appendChild(text);
tr.appendChild(td);
tableBody.appendChild(tr);
});
const tableRoot = tooltipEl.querySelector('table');
// Remove old children
while (tableRoot.firstChild) {
tableRoot.firstChild.remove();
}
// Add new children
tableRoot.appendChild(tableHead);
tableRoot.appendChild(tableBody);
}
const {
offsetLeft: positionX,
offsetTop: positionY
} = chart.canvas;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.font = tooltip.options.bodyFont.string;
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
};
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
url: 'https://www.chartjs.org/img/chartjs-logo.svg'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange',
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/512px-Stack_Overflow_icon.svg.png'
}
]
},
options: {
plugins: {
tooltip: {
enabled: false,
position: 'nearest',
external: externalTooltipHandler
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
Source: stackoverflow.com
Related Query
- Using chart js version 3, how to add custom data to external tooltip?
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- How to add text in centre of the doughnut chart using Chart.js?
- chart js tooltip how to control the data that show
- Add all data in the tooltip of Chart JS
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Add data to line chart using chart.js
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- how to add percentage value to legend field in pie chart using chart.js
- How to display chart using Chartjs with JSON data in Laravel
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to send data to chart js using angular
- How to get Data from API to display chart using chartjs in Vuejs
- How to show tooltip value of all data falling on the same axis in chart js?
- How to get the data attribute of the canvas chart created using chartjs
- How to add unused data background to bar in chart js
- ChartJS add custom tooltip to a stacked bar chart
- How can i display my data in a chart using chart js
- How to show tooltip only when data available in chart js?
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- charts.js - custom event using tooltip data (line chart)
- How does one add data to a Chart in an ajax call?
- How to add data dynamically to primevue Line chart from vuejs3?
- How to add image inside the doughnut chart using chart.js?
More Query from same tag
- Is Chartjs compatible with PhoneGap?
- Charts in Ionic 2
- Combining charting with the map
- Strikethough labels when data is hidden
- ChartJS, merge legends for multiple charts
- Chartjs Different Fill Color For Overlap Area
- Chartjs time plot xAxis shows year 1970
- How to use same data / labels on two y axes in Chart.js
- Chart.js: trouble with resizing on window resize
- Chart.js not showing when i try to format dates
- Draw line charts by days/weeks/months from a timestamp
- Chart.js Show labels on Pie chart
- JavaScript - Chart.js tooltip shows wrong x-axis value
- custom filter charts in chart.js
- How to make x-axis start from 0 in chart.js graphs?
- Multiples values in yAxes with same xAxes
- Chart.js v2, remove padding/margin from radar chart
- Chart.js Point image on hover
- event click only x-axis label chartJS
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- moment.js is not loading before chart.js in Firefox extension
- How can i give the full Legend a background color in chart js?
- Chartjs - make line start at ... but maintain x-axis data
- Change value from 0 to something on tooltip only
- How to to change mouse cursor on chart.js doughnut graph?
- Chart.js with data from database
- How to format tool tip as currency in piechart chartJS?
- chart.js set one bar as different colour?
- Draw multiple chart in one page with Chart.js
- Chart.js Error: You may need an appropriate loader to handle this file type