var paletteName = DevExpress.viz.currentPalette();
// ===== or when using modules =====
import { currentPalette } from 'devextreme/viz/palette';

let paletteName = currentPalette();

currentPalette(paletteName)

Changes the current palette for all data visualization UI components on the page.

import { currentPalette } from "devextreme/viz/palette"

Parameters:

paletteName:

String

A new palette's name.

Only the UI components created after calling this method use the new palette. Refresh the styling settings in other UI components using the DevExpress.viz.refreshTheme() method.

currentTheme()

Gets the current theme's name.

import { currentTheme } from "devextreme/viz/themes"

Return Value:

String

The current theme's name.

currentTheme(platform, colorScheme)

Changes the current theme for all data visualization UI components on the page. The color scheme is defined separately.

import { currentTheme } from "devextreme/viz/themes"

Parameters:

platform:

String

The platform name or "generic".

colorScheme:

String

The color scheme: "light" or "dark".

Only the UI components created after calling this method use the new theme. Refresh the styling settings in other UI components using the DevExpress.viz.refreshTheme() method.

currentTheme(theme)

Changes the current theme for all data visualization UI components on the page.

import { currentTheme } from "devextreme/viz/themes"

Parameters:

theme:

String

The new theme's name.

Only the UI components created after calling this method use the new theme. Use the DevExpress.viz.refreshTheme() method to refresh the styling settings in other UI components.

exportFromMarkup(markup, options)

Allows you to export UI components using their SVG markup.

import { exportFromMarkup } from "devextreme/viz/export"

Parameters:

markup:

String

The SVG markup of the UI components you want to export.

options:

Object

Export properties.

Object structure:

Name	Type	Description
backgroundColor	String	The color that fills transparent regions.
fileName	String	The name of the file to be saved.
format	String	The file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. PNG is used if the browser does not support exporting to the specified format.
height	Number	The SVG block's height in pixels. This field is required.
margin	Number	An empty space to be added around the exported SVG block; measured in pixels.
onExported	Function	Allows you to notify a user when exporting completes.
onExporting	Function	Allows you to request exporting details and prevent exporting. The parameter contains the following fields: fileName - the name of the file to be saved. format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. cancel - when assigned true, prevents exporting.
onFileSaving	Function	Allows you to access exported data and/or prevent it from being saved to a file on the user's local storage. The parameter contains the following fields: fileName - the name of the file to be saved. format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. data - exported data as a BLOB. cancel - when assigned true, prevents the file from being saved.
proxyUrl	String	IMPORTANT Since v10, Safari browser supports API for saving files, and this property is no longer required. The URL of a server-side proxy required for export in Safari on Mac OS. See proxyUrl for details.
svgToCanvas	Function	A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details.
width	Number	The SVG block's width in pixels. This field is required.

View Demo

exportWidgets(widgetInstances)

Exports one or several UI components to PNG.

import { exportWidgets } from "devextreme/viz/export"

Parameters:

widgetInstances:

Array<Array<Object>>

An array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]

Each nested array contains UI component instances that should be in the same row in the exported document.

View Demo

exportWidgets(widgetInstances, options)

Exports one or several UI components.

import { exportWidgets } from "devextreme/viz/export"

Parameters:

widgetInstances:

Array<Array<Object>>

An array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]

Each nested array contains UI component instances that should be in the same row in the exported document.

options:

Object

Export properties.

Object structure:

Name	Type	Description
backgroundColor	String	The background color.
fileName	String	The name of the file to be saved.
format	'GIF' \| 'JPEG' \| 'PDF' \| 'PNG' \| 'SVG'	The file's format. PNG is used if the browser cannot export the file in the specified format.
gridLayout	Boolean	If true, UI components are arranged in columns with equal widths (the width of the widest UI component). If false, UI components are placed next to each other in rows (default). In any case, each row has the height of the highest UI component in it.
horizontalAlignment	'center' \| 'left' \| 'right'	Horizontally aligns UI components in their columns. Applies only when gridLayout is true.
margin	Number	Margins to be added to each side of the document; measured in pixels.
onExported	Function	Allows you to notify a user when the export is completed.
onExporting	Function	Allows you to request export details and prevent export. The parameter contains the following fields: fileName - the name of the file to be saved. format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. cancel - prevents export when assigned true.
onFileSaving	Function	Allows you to access exported data and/or prevent it from being saved to a file in the user's local storage. The parameter contains the following fields: fileName - the name of the file to be saved. format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. data - exported data as a BLOB. cancel - when assigned true, prevents the file from being saved.
proxyUrl	String	IMPORTANT Since v10, Safari browser supports API for saving files, and this property is no longer required. The URL of a server-side proxy. No longer required. See proxyUrl for more details.
svgToCanvas	Function	A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details.
verticalAlignment	'bottom' \| 'center' \| 'top'	Vertically aligns UI components in their rows.

View Demo

generateColors(palette, count, options)

Returns a subset of palette colors.

import { generateColors } from "devextreme/viz/palette"

Parameters:

palette:

Array<String>

A palette name or an array of colors. See palette for more information.

count:

Number

The number of colors in the resulting subset.

options:

Object

Optional settings.

Object structure:

Name	Type	Description
baseColorSet	'simpleSet' \| 'indicatingSet' \| 'gradientSet'	The color set that provides the colors. The default value is "simpleSet". See getPalette(paletteName) for more information.
paletteExtensionMode	'alternate' \| 'blend' \| 'extrapolate'	The mode in which the palette should be extended when it contains less colors than specified in the count parameter. The default value is "blend". See paletteExtensionMode for more information.

Name

Type

Description

baseColorSet

'simpleSet' | 'indicatingSet' | 'gradientSet'

The color set that provides the colors. The default value is "simpleSet".
See getPalette(paletteName) for more information.

paletteExtensionMode

'alternate' | 'blend' | 'extrapolate'

The mode in which the palette should be extended when it contains less colors than specified in the count parameter. The default value is "blend".
See paletteExtensionMode for more information.

Return Value:

Array<String>

Colors in hexadecimal format.

The following code generates ten colors from the Material palette's gradient color set:

JavaScript

var colors = DevExpress.viz.generateColors('Material', 10, { baseColorSet: 'gradientSet' });
// ===== or when using modules =====
import { generateColors } from 'devextreme/viz/palette';

let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });

Use the generated colors to paint elements of different UI components in identical colors. For instance, you can assign the same colors to series in two different charts to indicate the visualized information is connected.

getMarkup(widgetInstances)

Gets the SVG markup of specific UI components for their subsequent export.

import { getMarkup } from "devextreme/viz/export"

Parameters:

widgetInstances:

Array<Object>

The UI component instances.

Return Value:

String

The UI components' SVG markup. Pass it to the exportFromMarkup(markup, options) method to export the UI components.

getPalette(paletteName)

Gets the color sets of a predefined or registered palette.

import { getPalette } from "devextreme/viz/palette"

Parameters:

paletteName:

String

The palette's name.

Return Value:

Object

The palette's settings.

The returned value is an object of the following structure:

JavaScript

{
    // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], 
    // Applies in the CircularGauge and LinearGauge
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], 
    // Applies in the VectorMap and TreeMap with a gradient or range colorizer 
    gradientSet: ['#78b6d9', '#eeba69'] 
}

The built-in palettes are listed in the Appearance Customization topic.

getTheme(theme)

Gets a predefined or registered theme's settings.

import { getTheme } from "devextreme/viz/themes"

Parameters:

theme:

String

The theme's name.

Return Value:

Object

The theme's settings.

map

An object that serves as a namespace for the VectorMap UI component.

refreshPaths()

The method to be called every time the active entry in the browser history is modified without reloading the current page.

import { refreshPaths } from "devextreme/viz/utils"

Each data visualization UI component addresses its inner elements by their URLs. Those URLs break when the active history entry is modified without reloading the current page (see Adding and modifying history entries). As a result, some UI component elements may get mixed up or disappear completely. To fix the URLs, call the refreshPaths() method right after the history entry modification, and in the onpopstate event handler or, if you use a routing library, in its counterpart.

JavaScript

window.history.pushState({ foo: "bar" }, "title", "?foo=bar");
DevExpress.viz.refreshPaths();

window.onpopstate = function(event) {
    DevExpress.viz.refreshPaths();
}

The problem with broken URLs may also emerge if the page uses a path modifying HTML tag; for example, <base> or <iframe>. To resolve it, set the pathModified property of the UI component to true.

refreshTheme()

Refreshes the current theme and palette in all data visualization UI components on the page.

import { refreshTheme } from "devextreme/viz/themes"

registerPalette(paletteName, palette)

Registers a new palette.

import { registerPalette } from "devextreme/viz/palette"

Parameters:

paletteName:

String

The palette's name.

palette:

Object

The palette's settings.

The palette settings is an object of the following structure:

JavaScript

{
    // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], 
    // Applies in the CircularGauge and LinearGauge
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], 
    // Applies in the VectorMap and TreeMap with a gradient or range colorizer 
    gradientSet: ['#78b6d9', '#eeba69'] 
}

registerTheme(customTheme, baseTheme)

Registers a new theme based on the existing one.

import { registerTheme } from "devextreme/viz/themes"

Parameters:

customTheme:

Object

The theme's settings.

baseTheme:

String

The base theme's name.

For details on how to customize a theme, refer to the Themes article.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery/JS Common - Utils - viz

currentPalette()

currentPalette(paletteName)

See Also

currentTheme()

currentTheme(platform, colorScheme)

See Also

currentTheme(theme)

See Also

exportFromMarkup(markup, options)

See Also

exportWidgets(widgetInstances)

See Also

exportWidgets(widgetInstances, options)

See Also

generateColors(palette, count, options)

getMarkup(widgetInstances)

See Also

getPalette(paletteName)

getTheme(theme)

map

refreshPaths()

refreshTheme()

See Also

registerPalette(paletteName, palette)

registerTheme(customTheme, baseTheme)