Yandex Cloud
Search
Contact UsGet started
  • Pricing
  • Customer Stories
  • Documentation
  • Blog
  • All Services
  • System Status
    • Featured
    • Infrastructure & Network
    • Data Platform
    • Containers
    • Developer tools
    • Serverless
    • Security
    • Monitoring & Resources
    • ML Services
    • Business tools
  • All Solutions
    • By industry
    • By use case
    • Economics and Pricing
    • Security
    • Technical Support
    • Start testing with double trial credits
    • Cloud credits to scale your IT product
    • Gateway to Russia
    • Cloud for Startups
    • Center for Technologies and Society
    • Yandex Cloud Partner program
  • Pricing
  • Customer Stories
  • Documentation
  • Blog
© 2025 Direct Cursus Technology L.L.C.
Yandex DataLens
    • Overview
      • Overview
      • Tabs
      • Sources
      • Available methods
      • Notifications
      • Chart links in dashboards and reports
      • Cross-filtering
      • Chart debugging
        • Overview
        • Table
        • Chart (Gravity UI Charts)
        • Markdown
        • Advanced chart
        • Selector
    • Versioning
    • Chart inspector
    • Access management
  • Audit Trails events

In this article:

  • Structure on the Prepare tab
  • Structure on the Config tab
  • Examples
  1. Charts
  2. Charts in Editor
  3. Visualization types
  4. Chart (Gravity UI Charts)

Chart (Gravity UI Charts)

Written by
Yandex Cloud
Updated at July 9, 2025
  • Structure on the Prepare tab
  • Structure on the Config tab
  • Examples

Note

This feature is only available with the Business service plan.

You can use this chart type to render various charts with the @gravity-ui/charts library.

For available types of visualizations, see the library overview.

The library is currently in alpha.

Structure on the Prepare tabStructure on the Prepare tab

This tab describes chart configuration with library component properties.

Configuration example for a simple pie chart:

// an example of a simple pie chart
module.exports = {
    series: {
        data: [{
		    type: 'pie', 
            data: [{
        	    name: 'Apple',
        	    value: 70,
    		}, {
        	    name: 'Cherry',
        	    value: 30,
    	    }],
        }],
    },
    legend: {enabled: true},
    title: {
        text: 'SeriesName',
        style: {fontSize: '12px', fontWeight: 'normal'},
    },
}

For available configuration fields, see the developer documentation.

Structure on the Config tabStructure on the Config tab

The Config tab describes the data structure for additional chart features, e.g., cross-filtering. Common format:

module.exports = {
    drilldown: {
        breadcrumbs: [],
    },
    events: {
        click: [{handler: {type: 'setActionParams'}, scope: 'point'}],
    },
}

ExamplesExamples

  • Column chart
  • Bar chart
  • Line chart
  • Area chart
  • Pie chart
  • Donut chart
  • Scatter chart
  • Tree chart
  • Cascade (waterfall) chart

Was the article helpful?

Previous
Table
Next
Markdown
© 2025 Direct Cursus Technology L.L.C.