LogoLogo
Platform
  • Welcome to Infinity - AI Powered Data Analytics tool.
  • Interactive Quick Start Guide
  • Comprehensive User Guide
    • 1. Connecting Your Data
      • Uploading Files as a Datasource
      • Connecting to Databases and Cloud Data Sources
      • AI-Powered Data Definition Wizard
      • Managing Data Sources
      • Supported Data Connectors
    • 2. Charts
      • Creating Charts
        • AI Chart Builder
        • Drag-Drop Builder
        • Data Explorer
      • Chart Customization
        • Chart Configuration Basics
        • Intent and Its Role in Chart Generation
        • Modifying Selected Data Sources and Tables
        • Understanding and Editing the SQL Query
        • Changing the Chart Type
        • Modifying Data Components
        • Using Pivoting for Multi-Dimensional Analysis
        • Applying Filters
        • Customizing Chart with Advanced Editor Panel
          • Styles
            • Chart Background
            • Titles
            • Legend
            • Grid
            • X-Axis
            • Y-Axis
            • Secondary Y-Axis
            • Series
          • Sharing
          • Prompts
          • JS (Code Mode)
        • Using AI Chatbot for Quick Modifications
      • Featured Chart Examples
        • Line/Bar/Column/Scatter Chart
        • Combo Chart
        • Stacked Area/Bar/Column Chart
        • 100% Stacked Column/Bar/Area Chart
        • Pie Chart
        • Metric Chart
        • Bubble Chart
        • Geo Chart
        • Geo with Makers Chart
        • Sankey Chart
        • Histogram Chart
        • Annotation Chart (ToDo)
        • Table Chart
        • Tree Map Chart
        • Timeline Chart (todo)
        • Gauge Chart (todo)
        • Custom Charts
      • Managing Charts
      • Accessing Charts
      • Chart Actions
    • 3. Storyboards
      • Creating Storyboards
      • Storyboard Customization
      • Managing Storyboards
      • Accessing Storyboards
      • Storyboard Actions
    • 4. Feed Page
    • 5. Curated Page
    • 6. Beacons: Working with Unstructured Data
      • Beacon : Basics
      • Creating Beacons
      • Accessing Beacon Data
      • Managing Beacon
    • 7. User and Access Management
      • Inviting Colleagues
      • Approving Join Requests
      • Roles
      • Orgs
      • Distribution Lists
      • Layouts
    • 8. Site Customization
    • 9. Subscriptions
      • Scheduled Emails
      • Event Based Notifications (Alerts)
      • Managing Alerts and Scheduled Emails
    • 10. Profile and settings
    • 11. Making the Most of Infinity's AI-Powered Features
    • 12. Advanced Topics
      • Chart Variables
      • Custom Computes for Event Based Subscriptions
      • Drill-down or Reference Charts
      • Custom XLS Template
      • Custom PPT Template
      • Editing the Chart JavaScript
    • 13. Getting Additional Help
      • Video Resources
      • Best Practices
      • FAQs
        • Error while creating chart
        • User not able to access Charts
        • Unable to Create a DataSource
        • Hard Reset/Reloading the browser
      • Contact Support
  • Topics to address
Powered by GitBook
On this page
  • ✅ When to Use Custom Charts
  • ⚙ Workflow
  • ⚠ Important Notes
  • ✅ Do's & ❌ Don'ts
  • 💎 Starter Template
  • 🟣 Common Custom Chart Templates
  • ✨ Pro Tips
  1. Comprehensive User Guide
  2. 2. Charts
  3. Featured Chart Examples

Custom Charts

PreviousGauge Chart (todo)NextManaging Charts

Last updated 1 month ago

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 .

  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.


✅ 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

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


[!tip] Always validate your custom code externally using the official before applying it inside Infinity.

Always use the .

ECharts Playground
ECharts Playground
ECharts API Docs