Charts and widgets

With CARTO for Developers you can easily build customizable and interactive data widgets, using live data from your cloud data warehouse, on top of your CARTO + deck.gl map.

Widgets in CARTO are a series of flexible data models from the same data sources you can use in your maps.

For example, the Formula widget represents a single numerical statistic, such as an average or a count out of the column you define. And the Categories widget allows you to group and aggregate based on columns of your choice.

You can then turn those data models into interactive charts, filters and other HTML elements.

How do I create widgets?

Adding widgets is easy. You just need to define your data sources from carto-api-client just like you do in the CARTO module in deck.gl, and then use any of their widgetSource data models, such as yourSource.widgetSource.getCategories():

import {VectorTableSource} from 'carto-api-client';

// define auth parameters in cartoConfig
  
const dataSource = await vectorTableSource({
  ...cartoConfig,
  tableName: 'carto-demo-data.demo_tables.osm_pois_usa'
})

const categories = await dataSource.widgetSource.getCategories({
  column: 'group_name',
  operation: 'count'
}) 

// categories will return the corresponding aggregation by the column group_name,
// you can then plug categories into any charting library or HTML element

A widget is a purposefully ample concept because it can be transformed into pretty much anything. A widget in CARTO can turn into

Custom HTML data representations: such as scorecards, tables or natural text.
Charts and other visualizations: you can use your favorite JS charting library to build bar charts, pie charts, radar charts and other charts.
Inputs and other interactive elements: some data models work great to build interactive inputs (such as range sliders) or you can easily build cross-filtering when users click in your charts.

Get started

Complete technical reference for CARTO Widgets
We have prepared a set of examples showcasing charts and widgets

Community

Our community in Slack is a great place to ask questions, share your work with other CARTO users, and get help from CARTO experts. Join here ⬇️

PreviousRapid Map Prototyping NextReference

Last updated 4 months ago

Was this helpful?

What is a widget?

Widgets in CARTO are a series of flexible data models from the same data sources you can use in your maps.

You can then turn those data models into interactive charts, filters and other HTML elements.

How do I create widgets?

import {VectorTableSource} from 'carto-api-client';

// define auth parameters in cartoConfig
  
const dataSource = await vectorTableSource({
  ...cartoConfig,
  tableName: 'carto-demo-data.demo_tables.osm_pois_usa'
})

const categories = await dataSource.widgetSource.getCategories({
  column: 'group_name',
  operation: 'count'
}) 

// categories will return the corresponding aggregation by the column group_name,
// you can then plug categories into any charting library or HTML element

A widget is a purposefully ample concept because it can be transformed into pretty much anything. A widget in CARTO can turn into

Custom HTML data representations: such as scorecards, tables or natural text.

Charts and other visualizations: you can use your favorite JS charting library to build bar charts, pie charts, radar charts and other charts.

Inputs and other interactive elements: some data models work great to build interactive inputs (such as range sliders) or you can easily build cross-filtering when users click in your charts.