# Custom Charts

Infinity gives you full control to build advanced visualizations by combining SQL-powered datasets with custom **ECharts** and **JavaScript** logic.

***

### ✅ When to Use Custom Charts

* You need a chart type not included in the Infinity UI.
* You want to apply advanced ECharts customizations (animations, interactions, formatting).
* You want full control over styling, behaviors, and events.

***

### ⚙ Workflow

1. Create your base visualization using the default Infinity chart options.
2. Switch the chart type to `Custom`.
3. Open `Advanced Settings > JS`.
4. Write or edit your custom ECharts code.
5. Test your code in the [ECharts Playground](https://echarts.apache.org/examples/en/editor.html).
6. Paste it back into Infinity and save.

***

### ⚠ Important Notes

> \[!warning]\
> **Do not modify the dataset block unless you fully understand it.**\
> The dataset is auto-generated by Infinity and links your SQL data to the chart.

```javascript
var option = {
  dataset: {
    source: [
      ["OrderYear","TotalSales"],
      [2012,2259451.64],
      [2013,2677439.91],
      [2014,3405748.03]
    ]
  },
  // Customize below
}
```

> \[!note]\
> Changing to `Custom` disables the **Styles Panel**.\
> All visual adjustments (colors, labels, axis formatting, etc.) must be done via code.

> \[!tip]\
> **Always validate** your custom code externally using the official [ECharts Playground](https://echarts.apache.org/examples/en/editor.html) before applying it inside Infinity.

***

### ✅ Do's & ❌ Don'ts

| ✅ Do                                | ❌ Don't                                     |
| ----------------------------------- | ------------------------------------------- |
| Keep the `dataset` block intact     | Remove or manually override the dataset     |
| Use `encode` to map dataset columns | Hardcode data inside `series` unless needed |
| Test your code externally           | Paste code directly without testing         |
| Comment your code for clarity       | Leave undocumented or cluttered code        |
| Backup your scripts externally      | Rely only on Infinity for versioning        |

***

### 💎 Starter Template

```javascript
var option = {
  dataset: {
    source: [
      ["Dimension", "Metric"],
      // Sample data injected automatically
    ]
  },

  // Customize below
  title: { text: "My Custom Chart" },
  tooltip: {},
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{
    type: 'bar',
    encode: {
      x: 'Dimension',
      y: 'Metric'
    }
  }]
};
```

***

### 🟣 Common Custom Chart Templates

#### Bar Chart

```javascript
var option = {
  dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar', encode: { x: 'OrderYear', y: 'TotalSales' } }]
};
```

***

#### Line Chart

```javascript
var option = {
  dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'line', smooth: true, encode: { x: 'OrderYear', y: 'TotalSales' } }]
};
```

***

#### Pie Chart

```javascript
var option = {
  dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
  series: [{ type: 'pie', radius: '50%', encode: { itemName: 'OrderYear', value: 'TotalSales' } }]
};
```

***

#### Donut Chart

```javascript
var option = {
  dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
  series: [{ type: 'pie', radius: ['40%', '70%'], encode: { itemName: 'OrderYear', value: 'TotalSales' } }]
};
```

***

#### Area Line Chart

```javascript
var option = {
  dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'line', areaStyle: {}, encode: { x: 'OrderYear', y: 'TotalSales' } }]
};
```

***

#### Gauge Chart

```javascript
var option = {
  series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 70, name: 'Completion' }] }]
};
```

***

#### Simple Click Event Example

```javascript
myChart.on('click', function (params) {
  alert('You clicked on: ' + params.name);
});
```

***

### ✨ Pro Tips

* Always use the [ECharts API Docs](https://echarts.apache.org/en/option.html).
* Test every chart variation externally.
* For production charts, organize code with comments and backups.
* Consider building a **Custom Chart Library** page inside your Infinity Documentation for your team.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/featured-chart-examples/custom-charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.