How to transfer colors from specific columns in one chart to the columns in another?
Question




Hi everyone, I have a donut chart which shows the total amount of applications and also displays them by status. If an end-user clicks on the "Submitted" part (shown here in light-green), it changes the graph on the right to display the total number of submitted applications.

I would like the column in the chart on the right to have the same color as the selected category on the left. So if the "Approved" category were shown (for example) in blue on the left, I would like the column on the right to get that exact same color when I select "Approved". If "Submitted" were in red, I would like the column on the right to turn red. Etc.

How do I go about doing this? The picture below shows the properties of the charts.









Thanks for reading!

Hi Lotte, 

You need to add color in color properties of Charts, 

You need to add if condition that if user clicked on submitted then the color of chart will be Red or if user clicked on Approved then Color of chart will be blue like this,

Hope this Helps,

Regards,

Komal

Hi Lotte,

Please find the attached OML. This might help you. In the onafterfetch you will find the logic. 

Thank you.

Charts.oml

mvp_badge
MVP

Hi Lotte Willemijn,

I have tried to solve the mentioned use case with the JavaScript approach because the requirement is related to adding functionality to the dynamically generated chart legends.

Implementation Steps:

  1. Encapsulate the PieChart inside a container with style class "pieChart"
  2. Define an OnAfterFetch action flow for the ChartDataPoints DataSource action to populate the initial value of the column chart
  3. Create a columnColor local variable to hold & set the clicked legend color value in 
  4. Define a client action to populate the Column Charts DataPoints as well as to set the columnColor local variable value
  5. Introduce an OnReady event handler in the respective screen with a JS Node
  6. Add the below JS snippet
setTimeout(function () {
    document.querySelectorAll('.pieChart .highcharts-legend-item').forEach(
    function (ele) {
            ele.addEventListener('click', function() {
                
                var color = this.querySelector('.highcharts-point').getAttribute('fill');
                
                if (color !== '#cccccc') {
                    var searchText = this.querySelector('text').innerHTML;
                    var startIndex = searchText.indexOf('>') + 1;
                    var endIndex = searchText.indexOf('</');
                        
                    searchText = searchText.substring(startIndex, endIndex);
                    $actions.GetLineGraphDataPoints(searchText, color);
                }
            }, false);
        }
    );
}, 1000);

7. Set the ColumnHighCharts HighchartsJSON property value as shown below

plotOptions: {    
    series : {
        animation: false,
        color: '" + columnColor +"'
    },
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        }
    }  
}

See this sample app MixChartDemo Challange

Refer to the attached .oml file


I hope this will help you to think the final solution for this task!


Kind regards,

Benjith Sam 

RWALabMixChart.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.