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
Create your base visualization using the default Infinity chart options.
Switch the chart type to Custom
.
Open Advanced Settings > JS
.
Write or edit your custom ECharts code.
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.
Copy 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.
✅ Do's & ❌ Don'ts
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
Copy 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
Copy 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
Copy 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
Copy var option = {
dataset: { source: [["OrderYear","TotalSales"], [2012,2259451], [2013,2677439], [2014,3405748]] },
series: [{ type: 'pie', radius: '50%', encode: { itemName: 'OrderYear', value: 'TotalSales' } }]
};
Donut Chart
Copy 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
Copy 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
Copy var option = {
series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 70, name: 'Completion' }] }]
};
Simple Click Event Example
Copy myChart.on('click', function (params) {
alert('You clicked on: ' + params.name);
});
✨ Pro Tips
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.