React Common - utils - viz - Methods

This section describes the methods exposed by the DevExpress.viz namespace.

currentPalette(paletteName)

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

import { PaletteTypes } from "devextreme-react/palette"
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.

import { ThemesTypes } from "devextreme-react/themes"
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.

import { ThemesTypes } from "devextreme-react/themes"
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.

import { ThemesTypes } from "devextreme-react/themes"
Parameters:
theme:

String

A new theme'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

exportFromMarkup(markup, options)

Allows you to export widgets using their SVG markup.

import { ExportTypes } from "devextreme-react/export"
Parameters:
markup:

String

The SVG markup of the widgets you need to export.

options:

Object

Export options.

Object structure:
Name Type Description
fileName

String

The name of the file to be saved.
format

String

The file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
backgroundColor

String

The color that fills transparent regions.
proxyUrl

String

The URL of a server-side proxy required for export in IE9 and 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 into 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.

View Demo

See Also

getMarkup(widgetInstances)

Gets the SVG markup of specific widgets for their subsequent export.

import { ExportTypes } from "devextreme-react/export"
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.

import { PaletteTypes } from "devextreme-react/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
{
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], // for "Chart", "PieChart", "BarGauge", "Funnel",
                                                                        // and "TreeMap" with a gradient or range colorizer 
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], // for "CircularGauge" and "LinearGauge"
    gradientSet: ['#78b6d9', '#eeba69'] // for "VectorMap" and "TreeMap" with a gradient or range colorizer 
}

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

getTheme(theme)

Gets a predefined or registered theme's settings.

import { ThemesTypes } from "devextreme-react/themes"
Parameters:
theme:

String

The theme's name.

Return Value:

Object

The theme's settings.

refreshPaths()

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

import { UtilsTypes } from "devextreme-react/utils"

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.

import { ThemesTypes } from "devextreme-react/themes"

See Also

registerPalette(paletteName, palette)

Registers a new palette.

import { PaletteTypes } from "devextreme-react/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
{
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], // for "Chart", "PieChart", "BarGauge", "Funnel",
                                                                        // and "TreeMap" with a gradient or range colorizer 
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], // for "CircularGauge" and "LinearGauge"
    gradientSet: ['#78b6d9', '#eeba69'] // for "VectorMap" and "TreeMap" with a gradient or range colorizer 
}

registerTheme(customTheme, baseTheme)

Registers a new theme based on the existing one.

import { ThemesTypes } from "devextreme-react/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 Appearance Customization article.