Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TargetProcess/tauCharts/llms.txt

Use this file to discover all available pages before exploring further.

Faceted charts — also known as small multiples — divide a single chart into a grid of panels, each showing a subset of the data. In Taucharts, you create a facet by passing an array to x or y instead of a single field name. Each element of the array adds a dimension to the grid: values in x arrays create column facets and values in y arrays create row facets. 
var chart = new Taucharts.Chart({
    type : 'scatterplot',
    x    : ['milespergallon'],
    y    : ['class', 'price'],
    color: 'class',
    data : [
        { class: 'C', milespergallon: 41.26, price: 24509, vehicle: 'Prius1'  },
        { class: 'C', milespergallon: 38.10, price: 22100, vehicle: 'Prius2'  },
        { class: 'B', milespergallon: 29.50, price: 18400, vehicle: 'Civic'   },
        { class: 'B', milespergallon: 32.00, price: 17900, vehicle: 'Corolla' },
        { class: 'A', milespergallon: 20.10, price: 35000, vehicle: 'Accord'  }
    ]
});

chart.renderTo('#chart');
In this example, y: ['class', 'price'] creates a row for each unique value of class. Within each row the inner dimension price is plotted on the y-axis.

​
How facets work

Taucharts interprets array values in x and y as a hierarchy:
  • The outermost elements (earlier in the array) define the facet panels.
  • The innermost element (last in the array) is the actual axis dimension plotted inside each panel.
// One column per unique value of 'year'
var chart = new Taucharts.Chart({
    type : 'scatterplot',
    x    : ['year', 'value'],
    y    : 'count',
    data : [ /* ... */ ]
});

​
Real data example

var chart = new Taucharts.Chart({
    type : 'scatterplot',
    x    : ['cylinders', 'horsepower'],
    y    : ['origin', 'mpg'],
    color: 'origin',
    data : [
        { cylinders: 4, horsepower:  75, mpg: 32, origin: 'Japan'  },
        { cylinders: 4, horsepower:  80, mpg: 29, origin: 'Japan'  },
        { cylinders: 6, horsepower: 100, mpg: 24, origin: 'USA'    },
        { cylinders: 6, horsepower: 110, mpg: 22, origin: 'USA'    },
        { cylinders: 4, horsepower:  70, mpg: 31, origin: 'Europe' },
        { cylinders: 8, horsepower: 165, mpg: 14, origin: 'USA'    }
    ],
    plugins: [
        Taucharts.api.plugins.get('legend')()
    ]
});

chart.renderTo('#chart');
This produces a grid with one column per cylinders value and one row per origin value. Each panel is a scatter plot of horsepower (x) against mpg (y).

​
Configuration

​
x
string | string[]
required
A single field name or an array of field names. When an array is provided, all but the last element define column facet panels; the last element is the x-axis dimension plotted inside each panel.
​
y
string | string[]
required
A single field name or an array of field names. When an array is provided, all but the last element define row facet panels; the last element is the y-axis dimension plotted inside each panel.
​
type
string
required
Any supported chart type. The facet grid applies the same chart type in every panel.
​
color
string
A data field for color encoding, applied consistently across all panels.
​
data
object[]
required
The full dataset. Taucharts partitions it into panels automatically based on the facet dimensions.
Panel labels are derived from the facet dimension values. Use settings.facetLabelDelimiter to customize the separator character used in compound panel titles.
For details on how Taucharts infers dimension types (category, measure, order) from your data fields, see data and dimensions.

Build docs developers (and LLMs) love

Get started for freeTalk to us