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

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 else but predefined sets of colors. If we want to use our own palette, we must define our own array of colors and then pass it to the object. The color object will also now when an palette name or a palette definition is passed.

 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