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.

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.

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

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

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

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

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

---

Donut Chart

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

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

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

---

Simple Click Event Example

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

---

✨ Pro Tips

• Always use the ECharts API Docs.

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

---