Type Error from chart.js using candlestick charts about chartjs-chart-financial

[joeuhren]

@khalid10830, @firebird631 and anyone else watching this issue: I ran into this problem this past weekend when trying to upgrade my charts to the newest version of chart.js (v4.4.0). I spent some time trying to debug it myself hoping to come up with a "proper" solution that fixes the chartjs-chart-financial plugin, but it seems too daunting a task for me right now with my current lack of chart.js plugin development knowledge.

The good news is that I was able to figure out a simple workaround to suppress the "String.prototype.toString requires that 'this' be a String" error msg which allows the chartjs-chart-financial plugin to be used with chart.js 3.8.0-4.4.0. To fix the error, all you need to do is specify the color attribute when you initialize your chart and it works on all versions from what I have seen. For example, to use the default candlestick colors you can initialize your chart like this:

var chart = new Chart(ctx, {
  type: 'candlestick',
  data: {
    datasets: [{
      label: 'CHRT - Chart.js Corporation',
      data: barData,
      color: {
        up: 'rgba(80, 160, 115, 1)',
        down: 'rgba(215, 85, 65, 1)',
        unchanged: 'rgba(90, 90, 90, 1)'
      }
    }]
  }
});

Here's a working example using the most recent chart.js version: jsfiddle

As mentioned above, I was unsuccessful in being able to fix this in the chartjs-chart-financial plugin code and don't have time to explore it further at the moment. Since we can prove that the financial plugin does in fact still work in chart.js v4.x as long as you explicitly specify the color object, I hope this knowledge may inspire someone with more time and/or understanding to procure a proper fix for this so that new chart.js users do not have to struggle like I did to make this work,

In case it is useful, I would also like to provide some more insight into what I discovered when researching this problem:

As indicated above, the chartjs-chart-financial plugin worked fine up until chart.js v3.8.0 when a change was made to the isPatternOrGradient function here: chartjs/Chart.js#10328

The problem is that the default color property sent to chart.js from the chartjs-chart-financial plugin throws an error when trying to run the following line from the isPatternOrGradient function:

const type = value.toString();

I was able to prove that a small change to the isPatternOrGradient function in the chart.js code will prevent the "String.prototype.toString requires that 'this' be a String" error msg and not require any workaround. The consensus that I am getting from reading the comments of the chart.js devs regarding this problem is that they would like to see a fix to the chartjs-chart-financial plugin to correct this problem and therefore I have not bothered to submit a pull-request to correct this issue. If I am incorrect, I would ask that one of the chart.js devs please tag me here or get in contact with me and I will happily provide a pull request. In case someone else wants to add a pull request themselves, here is the proposed change:

current isPatternOrGradient function code from /src/helpers/helpers.color.ts:

export function isPatternOrGradient(value: unknown): value is CanvasPattern | CanvasGradient {
  if (value && typeof value === 'object') {
    const type = value.toString();
    return type === '[object CanvasPattern]' || type === '[object CanvasGradient]';
  }

  return false;
}

fixed isPatternOrGradient function code:

export function isPatternOrGradient(value: unknown): value is CanvasPattern | CanvasGradient {
  if (value && typeof value === 'object') {
    let type: string = null;

    try {
      type = value.toString();
    } catch (e) {
      return false;
    }

    return type === '[object CanvasPattern]' || type === '[object CanvasGradient]';
  }

  return false;
}

Here's a working example of the fix already in place that proves that updating the chart.js code will allow the current chartjs-chart-financial plugin to work with chart.js versions greater than v3.8.0: jsfiddle

[marklapasa]

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.

[khalid10830]

Same here, does anybody found a solution other than downgrade to Chart js 3.7.1 ?
Thanks,

[marklapasa]

bump - same here too. I think this is because chart.js recently got updated to v3.8.0. As a JS n00b, I'm trying to rollback to an earlier version when this library used to work.

[Nireus79]

Same problem here. On Sunday candles disappeared from canvas and I got the same message as above on the console. Today the whole canvas disappeared from the page and I have new console errors. First a 404 and then this:

Uncaught TypeError: Cannot read properties of undefined (reading 'DateTime')
at [email protected]:7:386
at [email protected]:7:178
at [email protected]:7:249

After a mail I have send to [email protected] I got this answer:

Thank you for your email. I am afraid you have mistaken me for the web
developer of the Candlestick Plugin. I am not the developer of this
plugin. However there is a solution for you issue.

The candlestick plugin has not been modified since 2021. However, just a
few days ago Chart.js has been bumped to the latest version of Chart.js
3.8.0.
Previously it was Chart.js 3.7.1

I would recommend if possible for you to downgrade the Chart.js version
to 3.7.1 instead of the latest. That is most likely your issue as many
tend to have this same issue

Do this, change your CDN link to specific CDN version so it will stay
fixed on that version. Like the link below. If you do not specify it
will automatically get the latest version which is causes the issue you
experience.

<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>

Best regards,
Nick

Considered to use apexcharts instead as I still need EMA lines over candles. But their data structure on OHLC and time looks kind of funny to me. I mean on chart js it was just a df.to_json(orient='records') and boom...

Many thanx to Nick for the immediate response and his help.
It didn't work so far, but Ill work on it. Still like chart js.

And I was just about to release my app. Whatever. Yo Ho. A pirate's life for me.

Anyway, Ill try to fix it and let you know guys...

[marklapasa]

@Nireus79 oh man, this looks interesting. Been trying to shoe horn line graphs like EMA and VWAP along with candlesticks.

Thanks for the tip.

https://apexcharts.com/javascript-chart-demos/candlestick-charts/candlestick-with-line/

[Nireus79]

https://www.youtube.com/watch?v=ERgUCaYaI1Y On part 4 adds EMA line

[Nireus79]

Tried apexcharts. Had problems with their multi Y axis scales. Got no support. It was a confirmation to keep on chart js. They are workin' on it. Fast.

[AtifFarooq]

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?

[firebird631]

I'm interested in a upgrade of this plugin. Maybe we could join us to make an effort team to migrate the plugin in way to be compatible with last charJS version ?
I am not interesting to move to another chart library and financial dedicated chart library are not perfect for adding custom indicators.