score:0
change the tooltips.callbacks.footer function as follows and it will work as expected.
tooltips: {
callbacks: {
footer: tooltipitem => 'cashflow: ' + cashflow[tooltipitem[0].index]
}
},
please take a look at your amended and runnable code and see how it works.
var cashflow = [86.84, -36.36];
var timeofpaymentchart = new chart('mychart', {
type: 'bar',
data: {
labels: ['multisafepay', 'koll'],
datasets: [{
label: 'days between invoice and payment ',
data: [38, 22],
backgroundcolor: '#ffffff',
borderwidth: 1,
bordercolor: 'white',
hoverborderwidth: 3,
hoverbordercolor: 'white'
}],
},
options: {
scales: {
xaxes: [{
ticks: {
fontcolor: '#ffffff',
}
}],
yaxes: [{
ticks: {
beginatzero: true,
fontcolor: '#ffffff',
}
}]
},
tooltips: {
callbacks: {
footer: tooltipitem => 'cashflow: ' + cashflow[tooltipitem[0].index]
}
},
legend: {
display: false,
}
}
});
body {
background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="90"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js adding tooltip with cashflow
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Adding line over stacked line chart with ChartJS
- Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- what is wrong with my code ? java script chart position
- How to display Tooltip without hovering pie chart with 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
- 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
- How to prevent first/last bars from being cut off in a chart with time scale
- ChartJS - Draw chart with label by month, data by day
- Horizontal stacked bar chart with chart.js
- Chart JS custom tooltip option?
- line chart with {x, y} point data displays only 2 values
- Vertical stacked bar chart with chart.js
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- Adding trendlines to existing chart Chart.js
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js doughnut chart tooltip size?
- chart js how to fill legend box with colour
- ChartJS add tooltip to a grouped bar chart
- Chart JS Show HTML in Tooltip
- Chart.js Mixed Bar and Line chart with different scales
More Query from same tag
- Overlay Line on chart.js Graph
- How can I put my label on the right hand side of my chart in Chartjs
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Chart.js piechart, only have border on the outside of arc
- Chart.js bar chart bars and labels do not align
- how to display datetime list in graph using chart.js
- ChartJS remove vertical grid lines one on two
- Legends in Chart Js don't appears
- what is the correct way to destructure a nested json object with fetch?
- Laravel & chartjs blank canvas
- How to change the time format displayed in the chart?
- ChartJS: How to add empty values?
- chartJS or/and php print_r not working together
- Drill down charts dynamic functionality
- Vue2 trying to set chart title
- Chart.JS Bar Chart Throwing Error About Missing )
- Cannot use ng2-charts with Ionic 3 (ionic-angular 3.9.4)
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- How to display average line in chart.js
- How to return two lists to chartjs from Django View
- Chartjs pie chart tooltip mode label
- How do you add custom text to tooltips in charts.js
- Chart.js - Shift/Stagger labels horizontally (for x axis) instead of rotating
- How to create a charts in Razor Pages pulling data from the database?
- React-chartjs-2 update height dynamically
- Chartjs 3.2 problem with setting whole numbers for Y axis
- How can I trigger the hover mode from outside the chart with charts.js 2?
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- Line is rendering only vertical line instead of sloped line