PNG Image Export Settings

• Overview
• Setting Up File Name
• Background Color
• Transparent Background
• Using Custom Size
• exportAsPNG and getPNGImageBase64Encoded Function Parameters

Overview

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

All the settings are provided in the <png_image> node. 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 <png_image> node:

Attribute	Possible Values	Description
size	Original Custom	Sets exported image size mode: Original - uses the original chart width and height it 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 ".png" extension. By default, the value used is "AnyChartStock.png"
transparent	true false	If this attribute is set to true, the PNG image will be saved with transparent background; otherwise, the background will have the color set by the background_color attribute. By default, it is set to false.
background_color	Color	This attribute sets background color. By default, it is set to #FFFFFF.

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

Setting Up File Name

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

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 ".png" 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.

Transparent Background

The AnyChart Stock component exports PNG images in the 24-bit + Alpha Channel format, which allows obtaining images with transparent background.

Here is a sample illustration showing the chart's transparent background areas as a chessboard texture. When generating a PNG image with transparent background, these areas become transparent:

By default, the alpha channel is disabled, and the background is filled with the color specified in the background_color attribute. To enable exporting to PNG images with transparent background, use the following configuration:

Using Custom Size

By default, the component exports the chart to PNG 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.

exportAsPNG and getPNGImageBase64Encoded Function Parameters

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

chart.exportAsPNG();

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 <png_image> node.

A sample for saving a chart using XML String settings:

chart.exportAsPNG("<png_image transparent=\"false\" background_color=\"Gray\" />");

A sample for saving a chart using JavaScript Object settings:

chart.exportAsPNG({ transparent: false, backgroundColor: "Red"});

IMPORTANT! Settings passed in these methods' arguments do not reset current export settings. In other words, if the settings file contains:

And when calling the method you have specified:

The background_color parameter will be ignored, as the image is transparent (transparent = "true").

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