Adding custom scale support

[keremilhan]

I wrote a custom RadialLinearScale for my PolarArea Chart because I want the labels curved alongside of my chart. I want to use that custom scale in my chartjs-to-image chart as well but it seems it is not supported.

Reference photo for what my custom scale doing to the labels appearance.

[typpo]

Hi @keremilhan, are you able to share some code or an example config?

[keremilhan]

Hi @typpo, first of all thanks for your quick reply.

Context

I have encountered an issue while attempting to register a custom Radial Linear Scale in a Chart.js chart created using the chartjs-to-image library. I've provided a demo project on CodeSandbox to illustrate the problem:

CodeSandbox Demo

Problem Description

In my project, I've created a custom Radial Linear Scale in the "CustomRadialLinear" component, which is designed to curve labels along the outer circular line of a polar area chart. To enable this custom functionality, I need to set the type of the "r" scale in the chart options to "derivedRadialLinearScale" as follows:

scales: {
  r: {
    type: "derivedRadialLinearScale",
    suggestedMax: max,
    pointLabels: {
      display: true,
      centerPointLabels: true,
      font: {
        size: 12
      }
    },
    angleLines: {
      display: true
    },
    ticks: {
      font: {
        size: 13
      },
      stepSize: 1,
      labelOffset: 10,
      z: 2,
      backdropColor: "rgba(0,0,0,0)"
    }
  }
}

However, because I can not register CustomRadialLinearScale to the the chart created using chartjs-to-image, I encounter the following error:

Chart error: Error: "derivedRadialLinearScale" is not a registered scale.

Request

I kindly request assistance in resolving this issue. It seems that the custom Radial Linear Scale is not being recognized or registered properly when generating the chart image using chartjs-to-image.

Additional Information

• The provided CodeSandbox demo showcases the issue, making it easier to reproduce and debug.
• This is my first time creating an issue, and I appreciate any feedback or guidance to ensure the issue is well-documented and understandable.
• Thank you for your attention to this matter. I'm open to any suggestions or solutions to resolve this issue effectively.

[keremilhan]

Hi @typpo ,

I want to give more context about my use case.

My app allows users to generates PDF files with charts.

I'm currently using the react-pdf/renderer library to create PDFs and the react-chartjs-2 library for my charts. However, I've encountered some issues when trying to use the toBase64Image function to include the charts in the PDF. The problems arise because my charts are responsive, and the PDF's output varies based on the user's screen size. This often results in charts not having the desired width and height, and they appear blurred.

To address this issue, I explored three potential solutions:

• chartjs-to-image library: This option appears to be the most promising. However, I ran into a roadblock when attempting to register a custom RadialLinearScale. Without the ability to customize this scale, the image output won't meet my requirements.
• Headless Browser Solutions: I'm considering using a headless browser, such as Puppeteer, to render the charts. However, I don't have much experience with this approach and would appreciate any insights or pros and cons from those who have used it.
• Using toBase64Image with Off-Screen Elements: Another option is to use toBase64Image while rendering the charts in fixed-sized, off-screen elements. This approach ensures the charts are displayed exactly as intended in the PDF, but I'm not sure if hiding elements in this way is a good practice.

I'm open to any suggestions or guidance that you can provide to help me overcome this challenge. If you have experience with any of these approaches, or if you can recommend alternative solutions, please share your insights. Your expertise would be greatly appreciated in resolving this issue.