AnyChart
API Reference
Still have questions?
Contact support
Top

class anychart.editor.Editor Improve this Doc

Editor class.

Methods Overview

Specific settings
step()Step settings.
Class settings
addClassName()Adds the given class name to the list of classes to be applied to the chart editor component root element.
removeClassName()Removes the given class name from the list of classes to be applied to the chart editor component root element.
Data
data()Adds data to editor.
Events
listen()Adds an event listener.
listenOnce()Adds a single time event listener.
removeAllListeners()Removes all listeners.
unlisten()Removes the listener.
unlistenByKey()Removes the listener by the key.
Interactivity
hide()Hides chart editor component in DOM by setting 'display: none' style to it's root element.
show()Shows chart editor component in DOM by removing 'display: none' style.
Reference
version()Returns the current chart editor version.
Render options
decorate()Decorates the element for the UI component.
dialogRender()Renders the Chart Editor as a modal dialog.
dialogVisible()Visibility state of the dialog box
render()Renders the component.
Result code
getJavascript()Returns javascript code string that creates a configured chart.
getJson()Returns the configured chart in the JSON representation.
getXml()Returns configured chart in XML representation.
Miscellaneous
dispose()Disposes a chart editor. Removes it and its children from defs, clears the clip for managed elements.
localization()Sets anychart locale settings.

Methods Description

addClassName

Adds the given class name to the list of classes to be applied to the chart editor component root element.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
classNamestringClass name.
Sample for the addClassName() method
var editor = anychart.editor();

// Add class name.
editor.addClassName('custom-class');

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

data

Adds data to editor.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
dataArray.<Object> | ObjectArray of the objects or object with data settings.
Sample 1. Data as an array of objects
var editor = anychart.editor();

// Set chart editor raw data as an array of objects.
editor.data([
      {x: 'Point 1', value: 511.53},
      {x: 'Point 2', value: 900},
      {x: 'Point 3', value: 700},
      {x: 'Point 4', value: 380},
      {x: 'Point 5', value: 830}
])
editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html
Sample 2. Data as an object.
var editor = anychart.editor();

// Set chart editor data as an data settings object.
editor.data({
 data: [
     {x: 'Point 1', value: 511.53},
     {x: 'Point 2', value: 900},
     {x: 'Point 3', value: 700},
     {x: 'Point 4', value: 380},
     {x: 'Point 5', value: 830}
   ],
 chartType: 'pie',
 fieldNames: {
     x: 'Name',
     value: 'Revenue'
 },
 defaults: [
     {key: [['chart'], ['settings'], title().enabled()], value: true},
     {key: [['chart'], ['settings'], title().text()], value: 'ACME corp. Revenue'}
 ]
});

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

decorate

Decorates the element for the UI component.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
elementElementElement to decorate.
Sample for the decorate() method
var editor = anychart.editor();

// Decorate editor to the container.
editor.decorate(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

dialogRender

Renders the Chart Editor as a modal dialog.
To set dialog visible or hidden use dialogVisible(boolean) method.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)
Sample for the dialogRender() method
var editor = anychart.editor();

// Renders the Chart Editor as a modal dialog.
editor.dialogRender();

editor.dialogVisible(true);
See sample at https://www.anychart.com/features/chart_editor/demo.html
Renders the Chart Editor as a modal dialog using class name.
To set dialog visible or hidden use dialogVisible(boolean) method.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
classNamestringCSS class name for the dialog element, also used as a class name prefix for related elements; defaults to 'anychart-ce-dialog'. This should be a single, valid CSS class name.
Sample for the dialogRender() method
var editor = anychart.editor();

// Set the class name for the dialog element.
editor.dialogRender('custom-editor-dialog');

editor.dialogVisible(true);
See sample at https://www.anychart.com/features/chart_editor/demo.html

dialogVisible

Getter for the visibility of the dialog box.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Returns:

boolean - Visibility state.
Sample for the dialogVisible() method as getter
var editor = anychart.editor();
editor.dialogRender();

// Get the visibility state of editor dialog.
var dialogVisible = editor.dialogVisible();

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html
Setter for the visibility of the dialog box.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
enabledbooleanWhether the dialog should be visible.

Returns:

anychart.editor.Editor - Self instance for method chaining.
Sample for the dialogVisible() method as setter
var editor = anychart.editor();
editor.dialogRender();

// Show editor dialog.
editor.dialogVisible(true);

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

dispose

Disposes a chart editor. Removes it and its children from defs, clears the clip for managed elements.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)
Sample for the dispose() method
var editor = anychart.editor();
editor.render(document.getElementById('container'));

// Dispose chart editor.
editor.dispose();
See sample at https://www.anychart.com/features/chart_editor/demo.html

getJavascript

Returns javascript code string that creates a configured chart.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Returns:

string - Javascript string.
Sample for the getJavascript() method
 var editor = anychart.editor();
editor.render(document.getElementById('container'));

editor.listen('editorComplete', function() {

 // Get javascript code string.
 console.log(editor.getJavascript());

});
See sample at https://www.anychart.com/features/chart_editor/demo.html
Returns javascript code string using an object.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
outputOptionsanychart.editor.JavascriptOptionsAn object with configuration options.

Returns:

string - Javascript string.
Sample for the getJavascript() method
 var editor = anychart.editor();
editor.render(document.getElementById('container'));

editor.listen('editorComplete', function() {

 // Get javascript code string.
 console.log(editor.getJavascript({minify: true, container: 'container', addData: true}));

});
See sample at https://www.anychart.com/features/chart_editor/demo.html

getJson

Returns the configured chart in the JSON representation.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Returns:

string - JSON string.
Sample for the getJson() method
var editor = anychart.editor();
editor.render(document.getElementById('container'));

editor.listen('editorComplete', function() {

 // Get JSON code string.
 console.log(editor.getJson());

});
See sample at https://www.anychart.com/features/chart_editor/demo.html

getXml

Returns configured chart in XML representation.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Returns:

string - XML string.
Sample for the getXml() method
var editor = anychart.editor();
editor.render(document.getElementById('container'));

editor.listen('editorComplete', function() {

 // Get XML code string.
 console.log(editor.getXml());

});
See sample at https://www.anychart.com/features/chart_editor/demo.html

hide

Hides chart editor component in DOM by setting 'display: none' style to it's root element.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDefaultDescription
hideboolean
true
Enabled state.
Sample for the hide() method
var editor = anychart.editor();
editor.render(document.getElementById('container'));

// Hide chart editor.
editor.hide(true);
See sample at https://www.anychart.com/features/chart_editor/demo.html

listen

Adds an event listener to an implementing object.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object)
Callback method. Function that looks like:
function(event){
   // event.actualTarget - actual event target
   // event.currentTarget - current event target
   // event.iterator - event iterator
   // event.originalEvent - original event
   // event.point - event point
   // event.pointIndex - event point index
}
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

listenOnce

Adds an event listener to an implementing object.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object)
Callback method.
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

Object - Unique key for the listener.

localization

Sets anychart locale settings.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
settingsObjectObject with locale settings.
For example:
editor.localization({
   inputLocale: 'es-py',
   outputLocale: 'bn-in',
   outputDateTimeFormat: 'dd MMMM yyyy'
 });

Also available settings:

Returns:

anychart.editor.Editor - Self instance for method chaining.
Sample for the version() method
var editor = anychart.editor();

// Set localization for the chart editor.
editor.localization({
 inputLocale: 'es-py',
 outputLocale: 'bn-in',
 outputDateTimeFormat: 'dd MMMM yyyy'
});

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

removeAllListeners

Removes all listeners from an object. You can also optionally remove listeners of some particular type.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
typestringType of event to remove, default is to remove all types.

Returns:

number - Number of listeners removed.

removeClassName

Removes the given class name from the list of classes to be applied to the chart editor component root element.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
classNamestringClass name to be removed from the chart editor component root element.
Sample for the removeClassName() method
var editor = anychart.editor();

editor.addClassName('custom-class');

// Remove class name.
editor.removeClassName('custom-class');

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

render

Renders the component.
If a parent element is supplied, the component's element will be appended to it.
If there is no optional parent element and the element doesn't have a parent node then it will be appended to the document body. Returns an error if the component is already displayed.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
parentElementElementThe parent element to render the component into.
Sample for the render() method
var editor = anychart.editor();

// Render editor to the container.
editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html

show

Shows chart editor component in DOM by removing 'display: none' style.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDefaultDescription
showboolean
true
Enabled state.
Sample for the show() method
var editor = anychart.editor();
editor.render(document.getElementById('container'));

// Show chart editor.
editor.show(true);
See sample at https://www.anychart.com/features/chart_editor/demo.html

step

Getter for the step by its name.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
stepNameanychart.enums.EditorSteps | stringStep name.

Returns:

anychart.editor.Step | null - Step by its name.
Sample for the step() method as getter
var editor = anychart.editor();

// Get a step by the 'export' name.
var step = editor.step('export');
step.enabled(false);

editor.render(document.getElementById('container'));
});
See sample at https://www.anychart.com/features/chart_editor/demo.html
Setter for the step settings.
Call this method only before render chart editor.
Step is a screen of the chart editor.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
stepNameanychart.enums.EditorSteps | stringStep name.
valueboolean | Object.<{enabled: boolean}>Boolean value to enable/disable step or object with enabled states.

Returns:

anychart.editor.Step | anychart.editor.Editor | null - Self instance for method chaining.
Sample for the step() method as setter
var editor = anychart.editor();

// Disable the step with the 'export' name.
editor.step('export', false);

editor.render(document.getElementById('container'));
});
See sample at https://www.anychart.com/features/chart_editor/demo.html

unlisten

Removes a listener added using listen() or listenOnce() methods.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDefaultDescription
typestring
The event type id.
listenerfunction(e:Object):boolean|undefined
Callback method.
useCaptureboolean
false
Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing
listenerScopeObject
Object in whose scope to call the listener.

Returns:

boolean - Whether any listener was removed.

unlistenByKey

Removes an event listener which was added with listen() by the key returned by listen() or listenOnce().

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Params:

NameTypeDescription
keyObjectThe key returned by listen() or listenOnce().

Returns:

boolean - Whether any listener was removed.

version

Returns the current chart editor version.

To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.11.1/js/anychart-editor.min.js)

Returns:

string - Editor version.
Sample for the version() method
 var editor = anychart.editor();

// Get chart editor version.
console.log(editor.version());

editor.render(document.getElementById('container'));
See sample at https://www.anychart.com/features/chart_editor/demo.html