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

***