viz

An object that serves as a namespace for DevExtreme Data Visualization Widgets.

Included in: dx.viz.js, dx.viz-web.js, dx.all.js

currentPalette()

Gets the current palette's name.

Module: viz/palette
Export: currentPalette
Return Value:

String

The current palette's name.

JavaScript
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 widgets on the page.

Module: viz/palette
Export: currentPalette
Parameters:
paletteName:

String

A new palette's name.

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

See Also

currentTheme()

Gets the current theme's name.

Module: viz/themes
Export: currentTheme
Return Value:

String

The current theme's name.

currentTheme(platform, colorScheme)

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

Module: viz/themes
Export: currentTheme
Parameters:
platform:

String

The platform name or "generic".

colorScheme:

String

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

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

See Also

currentTheme(theme)

Changes the current theme for all data visualization widgets on the page.

Module: viz/themes
Export: currentTheme
Parameters:
theme:

String

The new theme's name.

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

See Also

exportFromMarkup(markup, options)

Allows you to export widgets using their SVG markup.

Module: viz/export
Export: exportFromMarkup
Parameters:
markup:

String

The SVG markup of the widgets you want to export.

options:

Object

Export options.

Object structure:
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.

backgroundColor:

String

The color that fills transparent regions.

proxyUrl:

String

The URL of a server-side proxy required for export in Safari on Mac OS. See proxyUrl for details.

width:

Number

The SVG block's width in pixels. This field is required.

height:

Number

The SVG block's height in pixels. This field is required.

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.
onExported:

Function

Allows you to notify a user when exporting completes.

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.
margin:

Number

An empty space to be added around the exported SVG block; measured in pixels.

exportWidgets(widgetInstances)

Exports one or several widgets to PNG.

Module: viz/export
Export: exportWidgets
Parameters:
widgetInstances:

Array<Array<DOMComponent>>

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 widget instances that should be in the same row in the exported document.

exportWidgets(widgetInstances, options)

Exports one or several widgets.

Module: viz/export
Export: exportWidgets
Parameters:
widgetInstances:

Array<Array<DOMComponent>>

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 widget instances that should be in the same row in the exported document.

options:

Object

Export options.

Object structure:
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.

backgroundColor:

String

The background color.

margin:

Number

Margins to be added to each side of the document; measured in pixels.

gridLayout:

Boolean

If true, widgets are arranged in columns with equal widths (the width of the widest widget).
If false, widgets are placed next to each other in rows (default).
In any case, each row has the height of the highest widget in it.

verticalAlignment: 'bottom' | 'center' | 'top'

Vertically aligns widgets in their rows.

horizontalAlignment: 'center' | 'left' | 'right'

Horizontally aligns widgets in their columns. Applies only when gridLayout is true.

proxyUrl:

String

The URL of a server-side proxy required for export in Safari on Mac OS. See proxyUrl for more details.

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.
onExported:

Function

Allows you to notify a user when the export is completed.

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.

generateColors(palette, count, options)

Returns a subset of palette colors.

Module: viz/palette
Export: generateColors
Parameters:
palette:

Array<String>

| 'Bright' | 'Default' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

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:
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.

baseColorSet: 'simpleSet' | 'indicatingSet' | 'gradientSet'

The color set that provides the colors. The default value is "simpleSet".
See getPalette(paletteName) 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 widgets 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 widgets for their subsequent export.

Module: viz/export
Export: getMarkup
Parameters:
widgetInstances:

Array<Object>

The widget instances.

Return Value:

String

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

View Demo

See Also

getPalette(paletteName)

Gets the color sets of a predefined or registered palette.

Module: viz/palette
Export: getPalette
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.

Module: viz/themes
Export: getTheme
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 widget.

refreshPaths()

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

Module: viz/utils
Export: refreshPaths

Each data visualization widget 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 widget 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 option of the widget to true.

refreshTheme()

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

Module: viz/themes
Export: refreshTheme

registerPalette(paletteName, palette)

Registers a new palette.

Module: viz/palette
Export: registerPalette
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.

Module: viz/themes
Export: registerTheme
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.