Out of order data disrupt the tooltip display
jaredgibb opened this issue · 1 comments
jaredgibb commented
When I use a dataset with data in order, tooltips appear as expected, but for example, when i add a bunch of data only in march, April, may, and then add 1 in February the febrary tooltip doesn't show. when data is sequential, there is no issue.
var ctx = document.getElementById(chartID).getContext('2d');
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
labels: labels,
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: [{"t":1614574800000,"o":100,"h":160,"l":50,"c":150},{"t":1614661200000,"o":120,"h":250,"l":5,"c":190},{"t":1614747600000,"o":100,"h":100,"l":45,"c":300},{"t":1614834000000,"o":75,"h":300,"l":50,"c":450},{"t":1614920400000,"o":200,"h":225,"l":180,"c":250},{"t":1615006800000,"o":200,"h":250,"l":180,"c":225},{"t":1615093200000,"o":300,"h":400,"l":100,"c":200},{"t":1615179600000,"o":300,"h":400,"l":100,"c":200},{"t":1615525200000,"o":400,"h":750,"l":300,"c":600},{"t":1615611600000,"o":50,"h":90,"l":40,"c":80},{"t":1615698000000,"o":50,"h":90,"l":40,"c":80},{"t":1615780800000,"o":50,"h":90,"l":40,"c":80},{"t":1615953600000,"o":50,"h":90,"l":40,"c":80},{"t":1616040000000,"o":50,"h":90,"l":40,"c":80},{"t":1616126400000,"o":600,"h":700,"l":500,"c":550},{"t":1617249600000,"o":40,"h":200,"l":30,"c":100},{"t":1620273600000,"o":40,"h":200,"l":30,"c":100}]
}]
},
options: {
scales: {
y: {
suggestedMin: yAxisMin,
suggestedMax: yAxizMax,
position: 'right'
},
x: {
type: 'time',
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
},
distribution: 'linear'
}
},
tooltips: {
mode: "interpolate",
intersect: false
}
}
});
this works fine while the below does not
var ctx = document.getElementById(chartID).getContext('2d');
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
labels: labels,
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: [{"t":1614574800000,"o":100,"h":160,"l":50,"c":150},{"t":1614661200000,"o":120,"h":250,"l":5,"c":190},{"t":1614747600000,"o":100,"h":100,"l":45,"c":300},{"t":1614834000000,"o":75,"h":300,"l":50,"c":450},{"t":1614920400000,"o":200,"h":225,"l":180,"c":250},{"t":1615006800000,"o":200,"h":250,"l":180,"c":225},{"t":1615093200000,"o":300,"h":400,"l":100,"c":200},{"t":1615179600000,"o":300,"h":400,"l":100,"c":200},{"t":1615525200000,"o":400,"h":750,"l":300,"c":600},{"t":1615611600000,"o":50,"h":90,"l":40,"c":80},{"t":1615698000000,"o":50,"h":90,"l":40,"c":80},{"t":1615780800000,"o":50,"h":90,"l":40,"c":80},{"t":1615953600000,"o":50,"h":90,"l":40,"c":80},{"t":1616040000000,"o":50,"h":90,"l":40,"c":80},{"t":1616126400000,"o":600,"h":700,"l":500,"c":550},{"t":1617249600000,"o":40,"h":200,"l":30,"c":100},{"t":1620273600000,"o":40,"h":200,"l":30,"c":100},{"t":1609477200000,"o":100,"h":150,"l":50,"c":125}]
}]
},
options: {
scales: {
y: {
suggestedMin: yAxisMin,
suggestedMax: yAxizMax,
position: 'right'
},
x: {
type: 'time',
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
},
distribution: 'linear'
}
},
tooltips: {
mode: "interpolate",
intersect: false
}
}
});
does data have to be sequential always?
for more context, here are my script tags I'm using at this time
<script src="https://cdn.jsdelivr.net/npm/luxon@1.24.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.9/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<script src="https://dd7tel2830j4w.cloudfront.net/f1614793727236x392906938665549250/chartjs-chart-financial.js"></script>
jaredgibb commented
When data are sequential, data is presented appropriately. If not, good luck!