PricingBlog

Use `canvas` for bar charts instead of `div`?

  • tomthebigtree-1272529793681854495

    Tom Ireland

    1 year ago

    I'm having a go at creating charts and wondering if it's possible to do that using canvas without custom actions instead of div? I can do the initial selection of the canvas by getting element by id but then I need to do const ctx = canvas.getContext("2d"); and I'd like to know if it's possible.

    I know I could use something like chartjs as a package, etc., but looking to see what I cn do in toddle just using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
  • jacobkofoed-1272535712465555527

    Jacob Kofoed

    1 year ago

    I don't think it is possible without custom code, no. You could get quite far with just a few custom actions, and you would still be able to preview changes in the editor etc. It's just that Canvas specific functionality is not currently exposed by toddle, perhaps one day. For charts I expect you can get really far with SVGs, and likely get a better result in terms of looks and performance. You can make entirely dynamic SVGs without custom code.
  • tomthebigtree-1272536570213433487

    Tom Ireland

    1 year ago

    Thanks, @Jacob Kofoed . I see you did something like with the cubic bezier editor, right? I'll dig into that to see what I can come up with.
  • jacobkofoed-1272537347900313622

    Jacob Kofoed

    1 year ago

    Yes, it uses SVGs only. I think it use one custom code formula to get the width of the parent, but I could just have hard-coded that value I guess 🤔 I think charts is a perfect use-case for SVGs really. Most chart libraries I checked out rely mostly on SVG and rarely on canvas.
  • tomthebigtree-1272537665580826744

    Tom Ireland

    1 year ago

    Thanks! Glad I asked the question. Will make sure I share what I come up with as well.