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
- How to set width of bar dynamically in chart.js?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Angular Charts - not able to read data
- Chartjs + jsPDF = Blurry image
- Can't make chart with Chart.js
- Chartjs 2.5.0 -> Labels below the chart
- Angular-charts/Chart.js is not working
- node js mysql query result rendered to chart.js labels in pug page
- Provide Chart.js with data via AJAX JSON not working?
- convert csv to json for javascript plotting library chartjs in Python or PHP
- Template variable injection in JS script
- Chart JS not working with Dynamic Data
- ChartJS how to generate custom legend?
- Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)
- Display data label (legend) in line-chart using chartjs
- React-Chartjs-2 and Chartjs v3:Option Property
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Dynamic Chart.js goes blank on resize
- Chart.js chart in vue.js component does not update
- Uncaught TypeError: Cannot create property '_meta' on string
- Passing Array to Chart.js not working, chart not rendering
- How to scrape an interactive charts with scrapy?
- Using Chart.Js to plot a scatter plot from an Array
- ChartJS multiple X axis and extra labels in y axis
- How to change orientation of the main y-axis label in charts.js?
- Chart.js scatter chart plot data joins start and finish points together
- Where is radar.js?
- Round pie chart in rectangular canvas
- Prevent the wiping of an Array after routing Angular.js
- ChartJS ReactJS Object of Objects