Skip to content

Color

The color of a visualization can be modified by using the Color object available in ChartFactor

1
2
var color = cf.Color()
myChart.set('color',color)

Themes

Themes are the styles or 'skins' used for the visualization. ChartFactor includes two: light which is the default theme and dark

1
2
color.theme('dark')
myChart.set('color',color)

This will modify the visual as follow:

F Dark theme

The color object also allows custom themes, that can be specified as JSON objects:

1
2
color.theme({ background:'#003399', font: 'yellow' })
myChart.set('color',color)

This configuration will display the visual like this:

F2

Custom "blue" theme

Other themes

Some visuals, specifically the Raw Data Table, Pivot and Slicer, support a different theme configuration. Since they are all tables, we can define a configuration as follows:

1
2
3
4
5
6
7
8
9
color.theme({
    "font":"white",
    "background":"gray",
    "header":"#56565c",
    "rowOdd":"#8d8d8d",
    "rowEven":"#6c6767",
    "headerFont":"#EEE"
})
myTable.set('color',color)

And that will give us a result like this:

The Time Slider visualization also has its own color configuration as shown here

Palettes

Palettes are the set of colors used to display data in a visual. ChartFactor includes a set of predefined palettes for the color object. These are: intense (default), green, macarons, purple, roma, and vintage. Palettes and themes can be combined.

1
2
color.palette('macarons')
myChart.set('color',color)

F3

Macarons palette

F4

Vintage palette

Palettes are nothing more than predefined sets of colors. If we want to create our own palette, we must define our own array of colors and then pass it to the palette method of the Color object. The palette method accepts a palette definition or an out-of-the-box predefined palette name.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var palette = [
            '#fdd49e',
            '#fdbb84',
            '#fc8d59',
            '#ef6548',
            '#d7301f',
            '#b30000',
            '#7f0000'
        ];
color.palette(palette);
myChart.set('color',color);

F5

Custom color palette

Color Metric

The color object accepts a metric object.  Use this feature when you have ordered data. Lightness steps dominate the look of these schemes, with light colors for low data values to dark colors for high data values.  Example:

1
2
3
4
5
let metric0 = cf.Metric("bytes","sum");
let color = cf.Color().palette("neonGreen");

color.metric(metric0);
myChart.set('color',color);

CM

Color Range

The range method of the Color object allows you to specify a range in the form of a list of objects that contain the minimum (min), maximum (max) and color (color) of each range.

The example below shows how to define color ranges:

1
2
3
4
5
color.range([
    {min: 0, max: 30000, color: 'red'},
    {min: 30000, max: 80000, color: 'gray'},
    {min: 80000, max: 200000, color: 'blue'}
]);

This is a full example using the definition above on packed bubbles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Define the metrics to be used
let metrics = [];
let metric = cf.Metric('commission', 'sum');
let metric2 = cf.Metric('pricepaid', 'sum');
const countMetric = cf.Metric('count');

// define attribute to group by
let groups = [];
let group = cf.Attribute('eventname.keyword')
    .limit(300)
    .sort('desc', metric);

metrics.push(metric, metric2);
metrics.push(countMetric);
groups.push(group);

let color = cf.Color();

color.metric(metric);
// setting the color ranges
color.range([
    {min: 0, max: 30000, color: 'red'},
    {min: 30000, max: 80000, color: 'gray'},
    {min: 80000, max: 200000, color: 'blue'}
]);

let myChart = cf.provider('Elasticsearch')
    .source('ticket_sales')
    .groupby(...groups)
    .metrics(...metrics)
    .graph('Packed Bubbles')
    .set('color', color)
    .element('chart')
    .execute();

The previous code will render a Packed Bubbles Chart like the shown below: CR

Color by Attribute Values

The definition of color by attribute value is very useful when you want to highlight a specific element within a graphic or maintain the continuity of colors within a data application.

The example below shows how to define colors for attribute values:

1
2
3
4
5
color.match({
    'Mamma Mia!': 'red',
    'Macbeth': 'blue',
    'Jersey Boys': 'purple'
});

This is a full example using the definition above to render bars.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Define the metrics to be used
let metrics = [];
let metric = cf.Metric('commission', 'sum');
let metric2 = cf.Metric('pricepaid', 'sum');
const countMetric = cf.Metric('count');

// define attribute to group by
let groups = [];
let group = cf.Attribute('eventname.keyword')
    .limit(10)
    .sort('desc', metric);

metrics.push(metric, metric2);
metrics.push(countMetric);
groups.push(group);

let color = cf.Color();
// setting the color for different attribute values
color.match({
    'Mamma Mia!': 'red',
    'Macbeth': 'blue',
    'Jersey Boys': 'purple'
});

let myChart = cf.provider('Elasticsearch')
    .source('ticket_sales')
    .groupby(...groups)
    .metrics(...metrics)
    .graph('Bars')
    .set('legend', 'right')
    .set('color', color)
    .element('chart')
    .execute();

The previous code will render a Bars Chart like the shown below: CR