Color¶

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

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

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.

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

Macarons palette

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.

var palette = [
            '#fdd49e',
            '#fdbb84',
            '#fc8d59',
            '#ef6548',
            '#d7301f',
            '#b30000',
            '#7f0000'
        ];
color.palette(palette);
myChart.set('color',color);

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:

let metric0 = cf.Metric("bytes","sum");
let color = cf.Color().palette("neonGreen");

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

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:

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.

// 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:

Automatic color ranges¶

Sometimes, it is better to enable automatic color range calculation rather than specifying color ranges manually. To do so, you can call the autoRange function of cf.Color as shown below:

color.autoRange({ dynamic: false });

The autoRange function has the following features:

It leverages the Jenks Fisher's Natural Breaks Classification algorithm to automatically obtain color range breaks
The number of colors in the color palette defines the number of ranges
It supports dynamic recalculation of ranges while adding and removing filters to the visualization. To enable automatic recalculation, pass the object { dynamic: true } as parameter. The default value for dynamic is false which is useful when you would like to visualize metric changes under constant color ranges through different time windows for example.

Color by Attribute Values¶

The color by attribute value feature is useful when you want to assign specific colors to attribute values in your chart. It is specially helpful when you have a system of charts and you want to establish consistent colors for those attribute values (e.g. Ford always in blue, Toyota always in red).

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

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

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

// 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 one shown below:

Multimetric charts¶

For Multimetric charts, instead of attribute values, you need to match the labels of the metrics you are using in your chart. If you are using the count metric (e.g. cf.Metric('count')), use its default label Transactions unless you provided a different label using the Custom Metadata feature.

The full example below renders a Multimetric Bars assigning specific colors to the commision, qtysold, and count metrics.

// Define the metrics to be used
let metrics = [
    cf.Metric("commission", "sum"),
    cf.Metric("qtysold", "sum"),
    cf.Metric("count") // the count metric
];

// define attribute to group by
let group = cf.Attribute("catdesc.keyword")
    .limit(10)
    .sort("desc", cf.Metric("commission", "sum"));

let color = cf.Color();
// setting the color for different metric names
color.match({
    "commission": "#0095b7",
    "qtysold": "#a0b774",
    "Transactions": "#f4589d" // Using the count metric
});

let myChart = cf.provider('Elasticsearch')
    .source('ticket_sales')
    .groupby(group)
    .metrics(...metrics)
    .graph('Multimetric Bars')
    .set("color", color)
    .set("legend", "top")
    .set("placement", "stacked")
    .element('chart')
    .execute();

The previous code will render a multimetric bar chart like the one shown below:

Themes¶

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

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

This will modify the visual as follow:

Dark theme

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

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

This configuration will display the visual like this:

Custom "blue" theme

Table theme configuration¶

Visualizations such as the Raw Data Table, Pivot and Slicer, support a different theme configuration. The following are the supported settings:

cellMoving: inside this option, you can define all the necessary CSS style to modify the container and the text of the cell that is moving. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
gridPanelStyle: inside this option, you can define all the necessary CSS style to modify the container of the chart or the general grid panel of the chart instance. It is useful for removing the border of the grid container. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerStyle: inside this option, you can define all the necessary CSS style to modify the header of the chart. It is useful for changing the background and color of the labels. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerIconStyle: inside this option, you can define all the necessary CSS style to modify the icons inside the headers. It is useful for changing the color of the icons. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerLabelStyle: inside this option, you can define all the necessary CSS style to modify the specific container of labels inside header columns. It is useful for changing the font-size, font-family, etc. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerNumericStyle: inside this option, you can define all the necessary CSS style to modify the header of the chart when a field is a numeric type INTEGER, DOUBLE, PERCENT, MONEY. It is useful for changing the color or background when a field type is numeric. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerResizeLineStyle: inside this option, you can define all the necessary CSS style to modify the separator line between columns inside the header definition. It is useful for changing the color of the separator line. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
headerHorizontalLineStyle: inside this option, you can define all the necessary CSS style to modify the bottom line between horizontal columns inside a group header definition. It is useful for changing the color of the bottom line. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
icons: inside this option, you can provide your own icons. If you have doubt, please refer to: agGrid Icons
bodyStyle: inside this option, you can define all the necessary CSS style to modify the body of the chart. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
unselectedCheckboxStyle: inside this option, you can define all the necessary CSS style to modify the checkbox inside the Slicer chart when is unselected. It is useful for changing the color or background of the checkbox. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
selectedCheckboxStyle: inside this option, you can define all the necessary CSS style to modify the checkbox inside the Slicer chart when the component is selected. It is useful for changing the color or background of the checkbox. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
filterStyle: inside this option, you can define all the necessary CSS style to modify the search input field. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
rowEvenStyle: inside this option, you can define all the necessary CSS style to modify the even rows inside the grid panel. It is useful for changing the color or background of the row. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
rowOddStyle: inside this option, you can define all the necessary CSS style to modify the odd rows inside the grid panel. It is useful for changing the color or background of the row. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
rowNumericEvenStyle: inside this option, you can define all the necessary CSS style to modify the even rows inside the grid panel when the field is a numeric type INTEGER, DOUBLE, PERCENT, MONEY. It is useful for changing the color or background of the row. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
rowNumericOddStyle: inside this option, you can define all the necessary CSS style to modify the odd rows inside the grid panel when the field is a numeric type INTEGER, DOUBLE, PERCENT, MONEY. It is useful for changing the color or background of the row. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
rowSelectedStyle: inside this option, you can define all the necessary CSS style to modify the selected rows. It is useful for changing the color or background of the selected row, for example in Slicer you can change the background color of the selected items. You can define a string with all the properties you need like you normally do when setting the attribute style in some HTML tag.
loadingTemplate: inside this option, you can define a custom HTML template for the loading message showing when visualization is busy. This is the default template: <span class="ag-overlay-loading-center">Loading...</span>. You are free to modify it or create a new template from scratch.

Example: Please review the following table theme configuration:

color.theme({
    "gridPanelStyle": "border: none;",
    "headerStyle": "background: #56565c; color: #EEE;",
    "headerIconStyle": "color: white;",
    "headerLabelStyle": "font-size: 16px;",
    "headerNumericStyle": "color: #;",
    "headerResizeLineStyle": "border-right: 1px solid white;",
    "headerHorizontalLineStyle": "border-bottom: 1px solid white;",
    "bodyStyle": "background: gray; color: #EEE; font-size: 14px;",
    "filterStyle": "border: none; height: 30px;",
    "unselectedCheckboxStyle": "color: #EEE; background: transparent;",
    "selectedCheckboxStyle": "color: white;",
    "rowSelectedStyle": "background: #009EDE;",
    "rowOddStyle": "background: #8d8d8d; color: white;",
    "rowEvenStyle": "background: #6c6767; color: white;",
    "rowNumericOddStyle": "background: white; color: black;",
    "rowNumericEvenStyle": "background: grey;",
    "loadingTemplate": '<span class="ag-overlay-loading-center">Please wait...</span>'
})
myTable.set('color',color)

It renders a table like this:

Time Range Picker theme configuration¶

The following are the supported color theme settings for the Time Range Picker:

tpButton: inside this option, you can define all the necessary CSS to modify the button box styles of all Time Range Picker buttons.
tpButtonActive: inside this option, you can define all the necessary CSS to modify the active button box styles of all Time Range Picker active buttons.
tpLabel: inside this option, you can define all the necessary CSS to modify the labels and anchors of the Time Range Picker body.
tpInput: inside this option, you can define all the necessary CSS to modify the inputs and selects in the Time Range Picker body.
tpHeader: inside this option, you can define all the necessary CSS to modify the header container of the Time Range Picker.
tpBody: inside this option, you can define all the necessary CSS to modify the body container of the Time Range Picker.
tpFooter: inside this option, you can define all the necessary CSS to modify the footer container of the Time Range Picker.

For example, see the Time Range Picker theme configuration below:

color.theme({
    "tpButton":"border: 1px solid #81c784;color: black; background: #cddc39",
    "tpButtonActive":"color: #fff; background: #4caf50",
    "tpLabel":"color: red !important",
    "tpInput":"background: #69f0ae !important; color: blue !important",
    "tpHeader":"background: #009688;color: #fff; font-size: 16px;",
    "tpBody":"background: #b2dfdb; color: #000;",
    "tpFooter":"background: #009688; color: #000;"
});

myTRP.set("color", color)

The color theme configuration above will render a Time Range Picker like this:

Time Slider theme configuration¶

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

Color Support¶

The following table shows the current support for different color options across widgets.

Widget Name	Color by Category	Color by Metric	Color by Range	Assigned colors to attribute values
Area Line	Yes	No	No	Yes
Group Legend	Yes	No	No	Yes
Bars	Yes	Yes	Yes	Yes
Bars and Line	Yes - each metric is a category	No	No	Yes
Box Plot	Yes	No	No	No
Multimetric Area Line	Yes - each metric is a category	No	No	Yes
Stacked Bars	Yes - for the subgroup	No	No	Yes
Clustered Bars	Yes - for the subgroup	No	No	Yes
Multimetric Stacked Bars	Yes - each metric is a category	No	No	Yes
Multimetric Cluster Bars	Yes - each metric is a category	No	No	Yes
Disk	Yes	Yes	Yes	No
Donut	Yes	Yes	Yes	Yes
Pie	Yes	Yes	Yes	Yes
Trend: Attribute Values	Yes	No	No	Yes
Trend: Multimetric	Yes	No	No	Yes
Floating Bubble	Yes	No	No	Yes
Nested Pie	Yes	No	No	No
Radar	Yes	No	No	Yes
Scatter Plot (no group)	Yes	Yes	No	N/A
Scatter Plot (single group)	Yes	Yes	Yes	Yes
Scatter Plot (two groups)	Yes	No	No	Yes
Tree	Yes	No	No	No
Tree Map	Yes	Yes	Yes	Yes
Tree Map 2D	Yes - for the first group	No	No	Yes - for the first group
Gauge	Yes	Yes	No	No
Histogram	Yes	No	No	No
KPI	No	No	Yes	No
Network	Yes	Yes	No	Yes
Packed Bubbles	Yes	Yes	Yes	Yes
Sunburst	Yes	No	No	No
Heat Map	No	Yes	Yes	No
Vector Map	No	Yes	Yes	No
Geo Map (shapes)	No	Yes	Yes	No
Geo Map (markers)	No	Yes	Yes	No
Word Cloud	Yes	Yes	Yes	No