chartjs/chartjs-chart-financial

Out of order data disrupt the tooltip display

jaredgibb opened this issue · 1 comments

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>

When data are sequential, data is presented appropriately. If not, good luck!