# Insights Chart Editor

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2Fboq8zaSpN81tcjH83nuz%2Finsights-chart-editor-light.png?alt=media&#x26;token=8ca5d30e-e0bd-4fcd-82ec-b1e95c657d74" alt=""><figcaption><p>Insights Chart Editor</p></figcaption></figure>

## Configuration <a href="#configuration" id="configuration"></a>

Set up a new instance with `config` parameters and `set`/`get` methods:

```javascript
const insightsChartEditor = appmixer.ui.InsightsChartEditor(config)

insightsChartEditor.set(key, value)
insightsChartEditor.get(key)
```

#### **`config.el`** **`...`**

{% hint style="info" %}
Learn about `widget` `config` [here](https://docs.appmixer.com/6.0/5.0/appmixer-sdk/ui-and-widgets/..#configuration).
{% endhint %}

## Instance <a href="#state" id="state"></a>

{% hint style="info" %}
Learn about `widget` instance [here](https://docs.appmixer.com/6.0/5.0/appmixer-sdk/ui-and-widgets/..#instance).
{% endhint %}

### State

```javascript
insightsChartEditor.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.

### Events <a href="#events" id="events"></a>

```javascript
insightsChartEditor.on(event, handler)
```

#### **`close`**

```javascript
insightsChartEditor.on('close', () => {/* ... */})
```

Close the editor.

## Example

```javascript
const insightsChartEditor = appmixer.ui.InsightsChartEditor({
    el: '#insights-chart-editor'
})

insightsChartEditor.open()
```