JPG Image Export Settings

• Overview
• Setting Up File Name
• Background Color
• JPEG Quality
• Using Custom Size
• exportAsJPGImage and getPNGImageBase64Encoded Function Parameters

Overview

The JPG format settings are made in the configuration XML file, in a specially designated section. For exporting to JPG, you can define a plenty of options, which are going to be covered further in this article.

All the settings are provided in the <jpg_image>. Here is the listing showing the location of that node in relation to the root:

Here is the table of attributes, descriptions and values available in the <jpg_image> node:

Attribute	Possible Values	Description
size	Original Custom	Sets exported image size mode: Original - uses the original chart width and height it is embedded in the page with; Custom - allows setting custom width and height for the exported image.
resizing_mode	Fit Recalculate Stretch RecalculateByProportions	Sets chart resizing mode when using custom size of exported image: This setting is applicable only when size="Custom". By default, it is set to Fit.
width	Integer	Sets custom image width in pixels. This setting is applicable only when size="Custom".
height	Integer	Sets custom image height in pixels. This setting is applicable only when size="Custom".
cut_extra_space	true false	If this attribute is set to true, the extra space without elements of the chart will be cropped when exporting. This setting is applicable only when the resizing_mode attribute is set to Fit or RecalculateByProportions. By default, it is set to false.
file_name	String	Sets name for the file the PNG image will be saved to. When changing this attribute, it is mandatory to specify the ".jpg" extension. By default, the value used is "AnyChartStock.jpg"
quality	Integer values from 0 to 100	Sets JPG image quality. By default, the value used is 80.
background_color	Color	This attribute sets background color. By default, it is set to #FFFFFF.

All the JPG settings specified in the configuration file apply when exporting the chart to the JPG format with a command from the context menu and are also considered when exporting by calling the JavaScript functions exportAsJPG and getJPGImageBase64Encoded.

Setting Up File Name

By default, when a chart is saved to a JPG image, the file gets the name "AnyChartStock.jpg".

To change the target file name, you need to use the file_name attribute. Here is a sample syntax for changing the default target file name:

Along with the file name, you need to specify the extension, i.e. append the ".jpg" string to the name.

Background Color

When embedding the component in an HTML page, the background color to be used in the given instance of the chart is passed to the the Flash Player. When exporting the chart to an image, the component cannot obtain the given background color, and therefore, the background color for exporting is to be configured separately.

By default, the background color used for exporting is white, but you can customize it with the color attribute. Here is a sample syntax for setting the background color to light-red:

The background_color attribute accepts color in different formats. A closer look at setting up color to elements in the AnyChart Stock component is provided in Color Settings.

JPEG Quality

One of JPG's specific settings is image quality. Quality level directly affects the size of the target file. Classically, the quality value varies from 0 to 100.

Here is a comparative illustration of a fragment of the same chart saved to JPG at different quality:

To customize the quality value, use the quality attribute in the <jpg_image> node; it can accept values between 0 and 100. Here is the syntax for setting quality at the level of "75":

Using Custom Size

By default, the component exports the chart to JPG images with the same dimensions and in the same scale as it is presented on the HTML page. When necessary, it allows using custom size (in pixels) when exporting using different chart scaling modes.

This functionality is identical for the PNG, JPG and PDF formats and is covered in detail in Using Custom Export Size.

exportAsJPG and getJPGImageBase64Encoded Function Parameters

When exporting a chart by calling the JavaScript functions exportAsJPG or getJPGImageBase64Encoded, the settings used by default are the ones specified in the configuration file. For example:

chart.exportAsJPG();

Would save the chart with the settings specified in the configuration file.

You can also specify custom settings (as an XML String JavaScript Object). The settings structure is identical to the structure of the <jpg_image> node.

A sample for saving a chart using XML String settings:

chart.exportAsJPG("<jpg_image quality=\"75\" background_color=\"Gray\" />");

A sample for saving a chart using JavaScript Object settings:

chart.exportAsJPG({ quality: 75, backgroundColor: "Red"});

Using the links below, you can try out these settings in action and obtain the archived example for reviewing the source code: