## Exporting charts as PDF/Images > JavaScript Reference > Component Attributes

The Component Attributes are those values that are passed on to FCExporter.swf as flashVars. The values of this section determine various behavior of the Exporter Component, like its user interface, saving mode, etc.

Typical usage of these attributes is in componentAttributes of every new FusionChartsExportObject.

Example:

    <script type="text/javascript">
        var myExporter = new FusionChartsExportObject('myExporter', 'FusionCharts/FCExporter.swf');

        // customize the exporter by modifying the componentAttributes
        myExporter.componentAttributes.imageBaseColor = '334455';
        myExporter.componentAttributes.defaultExportFileName = 'My Charts';

        // render the UI
        myExporter.Render('ExporterContainerID');
    </script>

In the FusionChartsExportObject constructor, you can provide component Attributes in {key1: 'value1', key2: 'value2', ... } format.

Example:

    var myComponent = new FusionChartsExportObject('myComponent', 'FusionCharts/FCexporter.swf',
        { imageBaseColor: 'PDF', defaultExportFilename: 'My Charts' } );

Attribute Name | Value Type | Description | Default Value
--- | --- | --- | ---
Export Settings
imageBaseColor | string (hexcode) | The base background color of the exported image. | FFFFFF
defaultExportFileName | string | This is name of the file that will be exported in case of batch export. For individual export, it acts as a prefix for the file names. Note: You do not need to specify the extension for the file. This is available for "both" and "batch" mode only. | FusionCharts
defaultExportFormat | string | The default format, in which to export the file Note: This is available for "both" and "batch" mode only. | png
General UI Settings
width | number | The width of the exporter UI. | 400
height | number | The height of the exporter UI. | 300
saveMode | string ('self', 'batch', 'both', 'individual') | The value 'Self' is used when you have one component per chart The value 'Batch' shows a single list item with a button to export all of the charts. The value 'Individual' shows a series of list items pertaining to the individual export properties of different charts. The value 'Both' integrates the options 'Individual' and 'Batch' into one list. | 'batch' when full mode 'self' when compact mode
fullMode | boolean (0/1) | Shows the list of charts which have the option to be exported. If value is set to 0 (default), the list is displayed as a drop down list. If value is set to 1, the list is displayed as an expanded list of item panels. | 0
showAllowedTypes | boolean (0/1) | Gives the option of selecting an export format. The options are shown in a drop down list. In case of full mode, the options appear at every list item panel, and can be applied to individual charts. | 0
message | string | The caption of the exporter UI. | FusionCharts Image Saver
showMesage | boolean (0/1) | A flag to determine whether the caption should be shown. | 0
bgColor | string (hex color code) | The background color of the exporter UI and the export item menu list | FFFFFF
borderColor | string (hex color code) | The border color of the exporter UI and the export item menu list. | BBBBBB
borderThickness | number | The border thickness of the exporter UI. | 0
vMargin | number | The border thickness of the exporter UI. | 12
btnDisabledTitle | string | The status message to show until the chart has been exported. Note: Not available when fullMode is set to '1' | Waiting
Chart List Attributes
saveAllTitle | string | The caption for the chart item list. Note: Available when fullMode is set to '1' | Save as single file
showAlternateColorBands | boolean (0/1) | Determines whether alternate color bands are to be shown for the chart list panels. Note: Available when fullMode is set to '1' | 1
alternateBandColor | string (hex color code) | The background color of the alternate chart list panels. Note: Applicable when showAlternateBandColors is set to '1' | EFEFEF
itemPanelHeight | number | The height of the individual panel items within the list. Note: Available when fullMode is set to '1' | 45
saveAllPanelBgColor | string (hex color code) | The background color of the save all panel. Note: Available when fullMode is set to '1' | E9E9E9
Font Configuration
fontFace | string | The font face of all text | Verdana
fontColor | string (hex color code) | The color of the text. | 000000
fontSize | number | The size of all text | 11
Button Configuration
btnFontFace | string | The font face of the button text | Verdana
btnFontColor | string (hex color code) | The color of the button text. | 000000
btnFontSize | number | The size of the button text. | 11
btnWidth | number | The width of the button. | 50
btnHeight | number | The height of the button. | 20
btnColor | string (hex color code) | The base color of the button. | F8F8F8
btnBorderColor | string (hex color code) | The border color of the button. | DDDDDD
btnSaveTitle | string | The title of the 'Save' button. | Save
btnSaveAllTitle | string | The title of the 'Save All' button. | Save All
Drop-Down Combo Configuration
comboBgColor | string (hex color code) | Specifies the background color of the combo button. | FFFFFF
comboBorderColor | string (hex color code) | Specifies the border color of the combo button. | Same as btnBorderColor
comboSelectedItemColor | string (hex color code) | Specifies the color of the selected item in the combo drop-down. | Same as btnColor
comboBtnBgColor | string (hex color code) | Specifies the background color of the combo drop-down button. | Same as btnColor
comboBtnBorderColor | string (hex color code) | Specifies the color of the combo drop-down button. | Same as btnBorderColor
comboBtnArrowColor | string (hex color code) | Specifies the color of the arrow of the combo drop-down button. | AAAAAA
comboHeight | number | Specifies the height of the combo button. | Same as btnHeight
Scroll-Bar Configuration
scrollWidth | number | Specifies the width of the scroll-bar. | 17
scrollChannelColor | string (hex color code) | Specifies the color of the scroll-bar channel. | EEEEEE
scrollChannelBorderThickness | number | Specifies the border thickness of the scroll-bar channel. | 0
scrollChannelBorderColor | string (hex color code) | Specifies the border color of the scroll-bar channel. | CCCCCC
scrollBarColor | string (hex color code) | Specifies the color thickness of the scroll-bar. | Same as btnColor
scrollBarBorderColor | string (hex color code) | Specifies the border color of the scroll-bar. | Same as btnBorderColor
scrollBarBorderThickness | number | Specifies the border thickness of the scroll-bar. | 0
scrollBtnColor | string (hex color code) | Specifies the color of the scroll-bar directional button. | Same as btnColor
scrollBtnBorderColor | string (hex color code) | Specifies the border thickness of the scroll-bar directional button. | Same as btnBorderColor
scrollBtnBorderThickness | number | Specifies the border thickness of the scroll-bar directional button. | 0
scrollBtnArrowColor | string (hex color code) | Specifies the color of the arrow of the scroll-bar directional button. | Same as comboBtnArrowColor