Export resolution – 1200 x 1800

[Elanchezhiyan]

Hi Team,

Do we have any functionality to export the JPG/PNG images at the resolution of 1200 x 1800. If Yes, can I have an example?

The Email id Associated with the subscription is hardave.dhaliwal@agilent.com

• This topic was modified 2 years, 1 month ago by Elanchezhiyan.

[Thangaraj Raman]

@elanchezhiyan,

You can scale-up or scale-down the chart before exporting using exportChart method and reset it back soon after exporting. Please refer to this forum thread for more information.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Elanchezhiyan]

Hi Thangaraj Raman,

I need to Export the image exactly at 1200 x 1800. Is it possible?

[Elanchezhiyan]

Hi Thangaraj Raman,
Do we have any update on this?

[Vishwas R]

@elanchezhiyan,

The solution shared by @thangaraj-raman demonstrates exporting chart with width set to 1800px & height to 1200px. You can customize the width & height of the chart as per your requirements like 1200×1800 or 1920×1080, etc. by changing the value passed in set method as shown below.

chart.set("width", 1200, false);
chart.set("height", 1800);
chart.exportChart({ format: "jpg" });

Please refer to documentation page for more customization options available along with examples that you can try out live.

—
Vishwas R
Team CanvasJS

[Elanchezhiyan]

Hello Vishwas R,
We have checked the documentation. But still, we have not met with the requirements. Attaching the image for your reference.

[Vishwas R]

@elanchezhiyan,

Based on the screenshot that you have shared, it seems like you have either set browser zoom or the scale option under display settings to 125%. In such cases, chart also gets zoomed as per your settings & exports at that particular resolution. Exporting at 100% browser & display scale settings seem to export chart at defined width & height.

However, if you like to keep browser / display scale settings at 125%, you will have to set width & height to 960×1440, so that you can export image at 1200×1800 pixels (125% of 960×1440 pixels).

—
Vishwas R
Team CanvasJS

[kevinjames]

hello thanks for your response it’s helpful for me.

[Elanchezhiyan]

Hi Vishwas R,
We have checked the browser with the scale settings. It works fine. But the customers do not use the same resolution. How to do we handle in this situation?

[Vishwas R]

@elanchezhiyan,

With a few lines of JavaScript code, you can retain the size of the exported image with the help of devicePixelRatio. Take a look at the code-snippet given below.

chart.set("width", 1200 * (1 / window.devicePixelRatio), false);
chart.set("height", 1800 * (1 / window.devicePixelRatio));
chart.exportChart({ format: "jpg" });

Please refer to this Stackoverflow thread for more information on handling device / browser scaling in JavaScript.

—
Vishwas R
Team CanvasJS

[Elanchezhiyan]

@Vishwas R,
The image seems to be in blur mode. Do we have any option to sharpen the image or sharpen the text in that image?

Image: https://elanchezhiyan_gmail.tinytake.com/msc/NzYyNTQ3Nl8yMDYwNTYxNQ

[Vishwas R]

@elanchezhiyan,

Some of the text content might look blurry because of the font-families & it’s size. I suggest you to try using Web Safe Fonts & font size that looks better as per the size of the image.

—
Vishwas R
Team CanvasJS