0π
β
To show corresponding value in the array of the hovered item you could use time_list[tooltipItem.index]
:
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
data_time = [0, 1, 2, 3, 4, 5, 6];
$(document).ready(function() {
var options = {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Dust",
data: [5, 10, 25, 5, 14, 3],
backgroundColor: ["rgba(48, 79, 254, 0.2)"],
borderColor: ["rgba(48, 79, 254, 1)"],
borderWidth: 1
},
{
label: "Lint",
data: [3, 20, 4, 10, 12, 7],
backgroundColor: ["rgba(136, 14, 79, 0.2)"],
borderColor: ["rgba(136, 14, 79, 1)"],
borderWidth: 1
},
{
label: "Manual Rundown",
data: [6, 10, 22, 21, 4, 18],
backgroundColor: ["rgba(153, 102, 255, 0.2)"],
borderColor: ["rgba(153, 102, 255, 1)"],
borderWidth: 1
},
{
label: "Paint Drop",
data: [3, 5, 19, 22, 18, 6],
backgroundColor: ["rgba(233, 30, 99, 0.2)"],
borderColor: ["rgba(233, 30, 99, 1)"],
borderWidth: 1
},
{
label: "Dry Spray",
data: [12, 28, 22, 14, 6, 3],
backgroundColor: ["rgba(33, 150, 243, 0.2)"],
borderColor: ["rgba(33, 150, 243, 1)"],
borderWidth: 1
},
{
label: "Robot Rundown",
data: [22, 19, 3, 4, 28, 6],
backgroundColor: ["rgba(0, 150, 136, 0.2)"],
borderColor: ["rgba(0, 150, 136, 1)"],
borderWidth: 1
},
{
label: "Shrinkage",
data: [1, 19, 15, 12, 3, 9],
backgroundColor: ["rgba(76, 175, 80, 0.2)"],
borderColor: ["rgba(76, 175, 80, 1)"],
borderWidth: 1
},
{
label: "Mottling",
data: [9, 19, 28, 1, 6, 9],
backgroundColor: ["rgba(255, 152, 0, 0.2)"],
borderColor: ["rgba(255, 152, 0, 1)"],
borderWidth: 1
},
{
label: "Orange Peel",
data: [30, 25, 23, 14, 6, 1],
backgroundColor: ["rgba(255, 87, 34, 0.2)"],
borderColor: ["rgba(255, 87, 34, 1)"],
borderWidth: 1
},
{
label: "Popping",
data: [20, 30, 23, 13, 3, 2],
borderWidth: 1
},
{
label: "Spittage",
data: [12, 17, 23, 27, 30, 15],
borderWidth: 1
},
{
label: "Blister",
data: [18, 20, 25, 22, 12, 8],
borderWidth: 1
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var time_list = [1, 2, 3, 4, 5, 6];
let label = "Line 1";
let label2 = "Line 2";
return [label, label2, time_list[tooltipItem.index]];
}
}
},
animation: {
tension: {
duration: 1000,
easing: "linear",
from: 1,
to: 0,
loop: true
}
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, options);
chart.getDatasetMeta(0).hidden = false;
chart.getDatasetMeta(1).hidden = false;
chart.getDatasetMeta(2).hidden = false;
chart.getDatasetMeta(3).hidden = true;
chart.getDatasetMeta(4).hidden = true;
chart.getDatasetMeta(5).hidden = true;
chart.getDatasetMeta(6).hidden = true;
chart.getDatasetMeta(7).hidden = true;
chart.getDatasetMeta(8).hidden = true;
chart.getDatasetMeta(9).hidden = true;
chart.getDatasetMeta(10).hidden = true;
chart.getDatasetMeta(11).hidden = true;
function updateValLow() {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
lowFactor();
$("#defLow").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
lowFactor();
}
});
};
function updateValMid() {
$("#defLow").multiselect("destroy");
$("#defHig").multiselect("destroy");
//$("#defLow").multiselect('destroy');
midFactor();
$("#defMid").multiselect({
selectAllJustVisible: true,
onChange: function(option, checked, select) {
midFactor();
}
});
};
function updateValHig() {
$("#defMid").multiselect("destroy");
$("#defLow").multiselect("destroy");
highFactor();
$("#defHig").multiselect({
onChange: function(option, checked, select) {
highFactor()
}
});
}
$("#defData").change(function() {
var val = $(this).val();
if (val == "low") {
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", false);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", true);
//$("#defLow").multiselect();
updateValLow();
chart.update();
} else if (val == "medium") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
$("#defHig").multiselect("destroy");
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", false);
$("#highData").attr("hidden", true);
updateValMid();
chart.update();
} else if (val == "high") {
$("#defLow").multiselect("destroy");
$("#defMid").multiselect("destroy");
updateValHig();
//$("#defHig").multiselect();
$("#lowData").attr("hidden", true);
$("#midData").attr("hidden", true);
$("#highData").attr("hidden", false);
//$("#defHig").multiselect('rebuild');
chart.update();
}
});
$("#defLow").multiselect({
onLoad(element) {
lowFactor();
},
onChange: function(option, checked, select) {
var curVal = $("#defLow").val();
lowFactor();
}
});
$("#defMid").multiselect({
onLoad(element) {
midFactor();
},
onChange: function(option, checked, select) {
midFactor();
}
});
$("#defHig").multiselect({
onLoad(element) {
highFactor();
},
onChange: function(option, checked, select) {
highFactor();
}
});
});
/* canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData label{
display: block!important;
}
ul.multiselect-container, .btn-group{
width:100%;
} */
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#lowData,
#midData,
#highData {
label {
display: block !important;
margin-bottom: 0.5rem;
}
.multiselect-native-select {
.btn-group {
button {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
text-align: left;
&::after {
position: absolute;
right: 15px;
top: 16px;
}
}
.multiselect-container {
li {
height: 46px;
label {
padding: 10px 20px;
margin-bottom: 0;
}
&:hover {
background: #333;
label {
color: #fff;
}
}
}
}
}
}
}
ul.multiselect-container,
.btn-group {
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-3">
<div class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defData">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="col-3">
<div id="lowData" class="form-group mt-3 mb-3">
<label for="defData">Select Factor</label>
<select class="form-control" id="defLow" multiple="multiple">
<option value="shrinkage" selected="selected">Shrinkage</option>
<option value="mottling" selected="selected">Mottling</option>
<option value="spittage" selected="selected">Spittage</option>
<option value="blister" selected="selected">Blister</option>
</select>
</div>
<div id="midData" class="form-group mt-3 mb-3" hidden>
<label for="defMid">Select Factor</label>
<select class="form-control" id="defMid" multiple="multiple">
<option value='pdrop' selected='selected'>Paint Drop</option>
<option value='dspray' selected='selected'>Dry Spray</option>
<option value='rbdown' selected='selected'>Robot Rundown</option>
<option value='opeel' selected='selected'>Orange Peel</option>
<option value='popping' selected='selected'>Popping</option>
</select>
</div>
<div id="highData" class="form-group mt-3 mb-3" hidden>
<label for="defHig">Select Factor</label>
<select class="form-control" id="defHig" multiple="multiple">
<option value='dust' selected='selected'>Dust</option>
<option value='lint' selected='selected'>Lint</option>
<option value='mrd' selected='selected'>Manual Rundown</option>
</select>
</div>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<canvas id="myChart"></canvas>
</div>
<div class="col-2"></div>
</div>
</div>
Source:stackexchange.com