Using custom colors for the KPI Widget

#1

Hi, I need to specify a custom color for the font and background of the KPI widget. I can’t see anything about that on the KPI documentation page, is possible to do this?

#2

hi @pedro, sure, it’s possible specify the font and the background color of the KPI widget, It’s not in the KPI Widget documentation page because we try to keep consistent in the way that we declare and use this kind of things that are common for many charts, you can take a look on the Color page of the documentation, in the Theme section, you will see that you can change the color and the background for all the charts that support it in this way:

let color = cf.Color();		    
color.theme({ background:'#003399', font: 'yellow' });
myChart.set('color', color);

Let me know if this answers your question, best regards.

#3

hi @dario thanks for answer, It works as you mention, but what can I do if I want to set the color depending on the metric value?

#4

hi @pedro in ChartFactor Toolkit Community 1.10 you can declare the KPI widget and register the callback to review the value of the metric and then set the color with the custom font color, for example:

// Define the metrics to be used
var metrics = [cf.Metric('commission', 'sum')];

let myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(...metrics)
                .graph('KPI')
                .element('chart');

myChart.execute()
    .then(function (result) {
        let color = cf.Color();

        if (result.data[0].current.metrics.commission.sum > 1000) {
            color.theme({ background: 'white', font: 'blue' });
        } else {
            color.theme({ background: 'white', font: 'red' });
        }
        myChart.set('color', color);
    }).catch(function (e) {
        console.log(e);
    });

In ChartFactor Community 1.11 we will release a new functionality called Color Range that will make this use case very easy to implement. Let me know if this solve your problem, best regards.

#5

hi @dario thanks for the answer and sorry for the late response. Indeed your answer was the solution to my problem, but I just upgraded to ChartFactor 1.11 and that solution stopped working. The color specified in the theme’s font is used in labels but not in the metric value. I tested the new color range functionality and it solves the problem in a better way so I am good. However, the ChartFactor team may want to look into the theme font directive as the change may not be intentional. Thanks.

#6

Hi @pedro thanks for taking the time to report this. I can confirm that this is not intentional. Color Range functionality aside, normal theme functionality is important. We will mark this as an issue and the fix should be included in the next maintenance release. You can report future issues here since you are an enterprise customer: https://desk.zoho.com/portal/aktiun/home. Best Regards.