Home>
I need to display multiple values in a bar chart when hovering over an element. Here is the screenshot:
<script type="text/javascript"> var HealthChartContainer= document.getElementById('HealthChart');
var HealthChart= HealthChartContainer.getContext('2d');
var dataset= {
labels: [
@for(var i=0;i<Model.data.Count-1; i++){
@:'@(Model.data[i].Item1)',
}
'@(Model.data[Model.data.Count-1].Item1)'
],
datasets: [{
label: '@Model.vAxisTitle',
data: [@(string.Join(", ", Model.data.Select(s=> s.Item2.ToString())))
],
backgroundColor: 'blue'
borderWidth: 1
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
};
const config= {
type: 'bar',
data:dataset,
options: {
responsive: true
legend: {
display: false
},
title: {
display: false
text: 'Chart.js Bar Chart'
},
scales: {
y: {
ticks: {
callback: function (value) { return Number.isInteger(value) ? value : '';}
}
}
}
},
};
var Chart= new Chart(HealthChart, config);
</script>
-
Answer # 1
-
Answer # 2
This video helped solve my problem: https://www.youtube.com/watch?v=UxJ5d-HGhJA
Links to external resources are fine, but leave a description along with the link so that other users have an idea of its content. Always quote the most relevant information that you have taken from the indicated source, in case it is not available or permanently closed.
aleksandr barakin2022-02-14 10:44:17
Related questions
- How to build a TANGENS TG (X) schedule in WinForms Chart c#?
- c# : ms winforms chart x axis label format time [closed]
- vue.js : Graph with sorting descending
- python : How to transfer them to other lists only certain parts of them?
- python : How to build a column chart with different colors in each element
- python : Pyqt QChart Segmentation Fault (Core Dumped)
- c# : How to find the maximum value along the Y axis relative to x in the Windows FOrm Histogram
- c# : WinForms: Changing Chart Component Properties
- javascript : Char.js Extra Points Problem
Option 1
According to the documentation, the tooltip can be influenced through options by creating the appropriate
This example adds a footer to the selected column's tooltip
In the same way, you can transform the rest of the output data, including labels, etc.
Option 2
If these features are not enough, then here is the code created on the basis of which you can fully customize the tooltip:
externalTooltipHandler
-a function that will work out before display, so you can add any relevant information there.