Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type Error from chart.js using candlestick charts

See original GitHub issue

Here is the error: Screenshot 2022-05-28 at 11 46 52

Here is a simple coding example `<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js" integrity="sha512-v1zUTZ9zv9Wb2scL/ANxXM6m7yegm/W5SN8SRHNFADdZIuSFFkrEBjNxO803DdFkjoCcJ88g1WHRVlLN6K/O1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>

<script src="local.js"></script>

</head> <body> <div> <canvas id="myChart"></canvas> </div> </body> <script> const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ];

const startingDate = luxon.DateTime.fromRFC2822("01 Aug 2021 00:00 GMT")
let date = luxon.DateTime.fromRFC2822('01 Apr 2017 00:00 Z');
// const startingDate = "01 Aug 2021 00:00 GMT"
console.log(startingDate.valueOf())
const data = {

  labels: labels,
  datasets: [{
    label: 'My First dataset',
    data: [
    {
        x: date.valueOf(),
        o: 1,
        l: 0.5,
        h: 2,
        c: 1.5
    },

    ],
  }]
};

const config = {
  type: 'candlestick',
  data: data,
  options: {}
};

</script> <script> const myChart = new Chart( document.getElementById('myChart'), config ); </script> </html>`

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

2reactions

marklapasacommented, May 31, 2022

Sweet - I figured out a short term fix.

Where you have:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

which will pull down the absolute latest version, replace it with the following snapshot from an earlier working version:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js" integrity="sha512-Lii3WMtgA0C0qmmkdCpsG0Gjr6M0ajRyQRQSbTF6BsrVh/nhZdHpVZ76iMIPvQwz1eoXC3DmAg9K51qT5/dEVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The long term fix is this library needs to be updated to supported the latest changes in v3.8.0.

0reactions

AtifFarooqcommented, Nov 15, 2022

Any update on this? The original issue opened in the Chart js repo (#10665) had to do with isPatternOrGradient helper not handling the case where a proxy object is passed in (when trying to render a candlestick chart). Where exactly does the problem originate from?