score:1
Accepted answer
your tooltips.callbacks
should look as follows:
tooltips: {
callbacks: {
title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
label: (tooltipitems, data) => data.datasets[tooltipitems.datasetindex].label + ' ' + data.datasets[tooltipitems.datasetindex].data[tooltipitems.index],
footer: (tooltipitems, data) => ['', 'description:'].concat(data.datasets[tooltipitems[0].datasetindex].info)
}
}
please have a look at your amended code below:
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var ctx = document.getelementbyid('chbar');
new chart(ctx, {
type: 'bar',
data: {
labels: ['proportion of coded projects'],
datasets: [{
label: 'coded projects',
data: [70],
backgroundcolor: '#d6e9c6',
info: [
['this refers to projects that have not'],
['been qualitatively coded using the tdf.']
]
},
{
label: 'remaining projects',
data: [170],
backgroundcolor: colors.slice(0, 1),
info: [
['this refers to total number'],
['of projects left to code.']
]
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
label: (tooltipitems, data) => data.datasets[tooltipitems.datasetindex].label + ' ' + data.datasets[tooltipitems.datasetindex].data[tooltipitems.index],
footer: (tooltipitems, data) => ['', 'description:'].concat(data.datasets[tooltipitems[0].datasetindex].info)
}
},
scales: {
xaxes: [{
stacked: true
}],
yaxes: [{
stacked: true
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="chbar"></canvas>
Source: stackoverflow.com
Related Query
- How can I create custom tooltips for each data point in a graph?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Chart.JS - Tooltips - Issue: 3 data points, all three individual tooltips showing for each data point
- Chart.js How can I embed additional values to each data point in radar chart
- How can I add vertical line and label for each point in Chart.js?
- Chart.js Custom Image for Each Point
- How to show Y axis ticks for every point in the graph
- How can I create a time series line graph in chart.js?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- how can plot graph using json data
- How we can set our own colors for each label in charts
- (Angular Ionic) How can I stream my custom data with chartjs-plugin-streaming?
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- How can i loop some specific key in each index json data and put it in dataset: data ? (chart.js)
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- How I can add the predict data and the actual data in the same graph with ChartJS?
- JavaScript Chart.JS - Custom tooltips to add description of specific data point when hovering
- Charts.js - How to set custom tooltip text for each dataset
- Chart.js how to create chart wirhout y-axis for two data sets
- How can I create a vertical scrolling in Chart.js for line chart?
- Chartjs: how can i create a graph with multiple jsons files?
- Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time
- How can i fix my code so i can read my data
- how to create bar chart with group and sam color for each group using chart.js?
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chartjs random colors for each part of pie chart with data dynamically from database
More Query from same tag
- Chart.js time series showing empty plot
- how to use vuechartkick in nuxt js
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- dynamically update the scale type of chartjs graph
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- Pie chart with Chart.js and mySQL
- Load ChartJS via VueJS - ChartJS empty and 0px dimension
- Canvas not rendering after animation without resizing viewport
- How can I add shadow color below the line in chart.js charts?
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- Chartjs-node with canvas-prebuilt is still throwing 'Cairo not found' errors
- Use AngularJS $scope var in on-page script
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- Remove animation time for chartjs datapoints
- ng2 scatter chart how to put labels in x axis
- javascript : extrapolate an array of numbers
- Dynamic Pie Chart With Json Data using chart.js
- Razor chart.js labels/data not in sync
- How to set lower and upper bound in react react-chartjs-2?
- how to put "%" in chart pie (chartjs)
- Unexpected behavior with chart.js
- Use chartjs-plugin-annotation 0.5.7 in Chartjs 2.9.x with React
- Chart.js and right side free space
- How to make a step line with charts.JS
- Chart JS change pointBackgroundColor based on data value
- Legends in Chart Js don't appears
- How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)
- VueJS TypeScript using ChartJS - Parsing error: '}' expected
- Draw horizontal line on chart in chart.js on v2
- Chart.js - combine data and label into a single object