Posedion Theme - BarChart X and Y Axis Label Font Color

[ebaykal]

I'm using Poseidon Theme with Dim layout mode. As you see below picture, font color of the charts' labels are dark and hard to read. Is it possible to change font-color as white.



PF Ver: 11.0.5

Thanks in advance,

[mert.sincan]

Hi,

Something like;
https://www.primefaces.org/ultima/
https://www.primefaces.org/ultima/favor ... tics.xhtml
https://www.primefaces.org/ultima/uikit/charts.xhtml

Best Regards,

[ebaykal]

Hi Mert,

Yeap something similar:) If you check posedion theme chart page, you will unsderstand me. X and Y label can't be read in "dark" or "dim" mode.

https://www.primefaces.org/poseidon/charts.xhtml

Thanks,

[mert.sincan]

Thanks a lot for the update! I'll share a sample with you asap.

[mert.sincan]

Hi,

So sorry for the delayed response! You need to write custom js for it. PrimeFaces or Premium Layouts does not support this directly. This is an example from Ultima;

Code: Select all

<script type="text/javascript">
        //<![CDATA[
            function ordersChartExtender() {
                var textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
                var gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
                var fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
                
                this.cfg.config.options = {
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                fontFamily,
                                color: textColor
                            }
                        }
                    },
                    responsive: true,
                    scales: {
                        y: {
                            ticks: {
                                fontFamily,
                                color: textColor
                            },
                            grid: {
                                color: gridLinesColor
                            }
                        },
                        x: {
                            ticks: {
                                fontFamily,
                                color: textColor
                            },
                            grid: {
                                color: gridLinesColor
                            }
                        }
                    }
                };
            }
            
            function overviewChartExtender(config) {
                config.options.responsive = true;
                config.options.scales = {
                    y: {
                        display: false
                    },
                    x: {
                        display: false
                    }
                }
            }
            
            function overviewChartExtender1() {
                var config = this.cfg.config;
                overviewChartExtender(config);
                
                var colors = getOverviewColors();
                config.data.datasets[0].borderColor = colors.tealBorderColor;
                config.data.datasets[0].backgroundColor = colors.tealBgColor;
            }
            
            function overviewChartExtender2() {
                var config = this.cfg.config;
                overviewChartExtender(config);
                
                var colors = getOverviewColors();
                config.data.datasets[0].borderColor = colors.tealBorderColor;
                config.data.datasets[0].backgroundColor = colors.tealBgColor;
            }
            
            function overviewChartExtender3() {
                var config = this.cfg.config;
                overviewChartExtender(config);
                
                var colors = getOverviewColors();
                config.data.datasets[0].borderColor = colors.pinkBorderColor;
                config.data.datasets[0].backgroundColor = colors.pinkBgColor;
            }
            
            function overviewChartExtender4() {
                var config = this.cfg.config;
                overviewChartExtender(config);
                
                var colors = getOverviewColors();
                config.data.datasets[0].borderColor = colors.tealBorderColor;
                config.data.datasets[0].backgroundColor = colors.tealBgColor;
            }

            function getOverviewColors() {
                var isLight = getComputedStyle(document.body).getPropertyValue('--layout-mode') !== 'dark';
                return {
                    pinkBorderColor: isLight ? '#E91E63' : '#EC407A',
                    pinkBgColor: isLight ? '#F48FB1' : '#F8BBD0',
                    tealBorderColor: isLight ? '#009688' : '#26A69A',
                    tealBgColor: isLight ? '#80CBC4' : '#B2DFDB'
                };
            }

            function chatContentScroll() {
                var content = $('.chat-content')[0];

                if (content) {
                    content.scroll({
                        top: content.scrollHeight
                    });
                }
            }

            function onChatInputKeyPress(event) {
                if (event.keyCode == 13) {
                    chatRC();
                    
                    return false; 
                }
            }

            function onChatEmoji() {
                PF('emojisOverlayPanelWidget').hide();

                var input = $('.chat-input')[0];
                input.focus();
                input.setSelectionRange(input.value.length, input.value.length);
            }
        //]]>
        </script>

Code: Select all

// dashboards.xhtml
<h:form id="dashboardForm">
         // All charts in dashboard
</h:form>

Code: Select all

// DashboardView.java
public void createOrdersChart(List<String> labels) {
        ordersChartModel = new LineChartModel();
        ChartData data = new ChartData();

        data.setLabels(labels);

        LineChartDataSet dataSet1 = new LineChartDataSet();
        List<Object> values1 = new ArrayList<>();
        values1.add(31);
        values1.add(83);
        values1.add(69);
        values1.add(29);
        values1.add(62);
        values1.add(25);
        values1.add(59);
        values1.add(26);
        values1.add(46);
        dataSet1.setData(values1);
        dataSet1.setLabel("New Orders");
        dataSet1.setFill(true);
        dataSet1.setBackgroundColor("rgba(77, 208, 225, 0.8)");
        dataSet1.setBorderWidth(2);
        dataSet1.setBorderColor("#4DD0E1");
        dataSet1.setTension(0.4);
        data.addChartDataSet(dataSet1);

        LineChartDataSet dataSet2 = new LineChartDataSet();
        List<Object> values2 = new ArrayList<>();
        values2.add(67);
        values2.add(98);
        values2.add(27);
        values2.add(88);
        values2.add(38);
        values2.add(3);
        values2.add(22);
        values2.add(60);
        values2.add(56);
        dataSet2.setData(values2);
        dataSet2.setLabel("Completed Orders");
        dataSet2.setFill(true);
        dataSet2.setBackgroundColor("rgba(63, 81, 181, 0.8)");
        dataSet2.setBorderWidth(2);
        dataSet2.setBorderColor("#3F51B5");
        dataSet2.setTension(0.4);
        data.addChartDataSet(dataSet2);

        ordersChartModel.setData(data);
        ordersChartModel.setExtender("ordersChartExtender");
    }

    public LineChartModel createOverviewChart(List<String> labels, List<Object> values) {
        LineChartModel overviewChartModel = new LineChartModel();
        ChartData data = new ChartData();

        data.setLabels(labels);

        LineChartDataSet dataSet = new LineChartDataSet();
        dataSet.setData(values);
        dataSet.setFill(true);
        dataSet.setBackgroundColor("rgba(77, 208, 225, 0.8)");
        dataSet.setBorderWidth(2);
        dataSet.setBorderColor("#4DD0E1");
        dataSet.setTension(0.4);
        data.addChartDataSet(dataSet);

        LineChartOptions options = new LineChartOptions();

        Legend legend = new Legend();
        legend.setDisplay(false);
        options.setLegend(legend);

        Tooltip tooltip = new Tooltip();
        tooltip.setEnabled(false);
        options.setTooltip(tooltip);

        Elements elements = new Elements();
        ElementsPoint point = new ElementsPoint();
        point.setRadius(0);
        elements.setPoint(point);
        options.setElements(elements);

        overviewChartModel.setOptions(options);
        overviewChartModel.setData(data);

        return overviewChartModel;
    }

    public void createOverviewChart1(List<String> labels) {
        List<Object> values = new ArrayList<>();
        values.add(50);
        values.add(64);
        values.add(32);
        values.add(24);
        values.add(18);
        values.add(27);
        values.add(20);
        values.add(36);
        values.add(30);

        overviewChartModel1 = createOverviewChart(labels, values);
        overviewChartModel1.setExtender("overviewChartExtender1");
    }

    public void createOverviewChart2(List<String> labels) {
        List<Object> values = new ArrayList<>();
        values.add(11);
        values.add(30);
        values.add(52);
        values.add(35);
        values.add(39);
        values.add(20);
        values.add(14);
        values.add(18);
        values.add(29);

        overviewChartModel2 = createOverviewChart(labels, values);
        overviewChartModel2.setExtender("overviewChartExtender2");
    }

    public void createOverviewChart3(List<String> labels) {
        List<Object> values = new ArrayList<>();
        values.add(20);
        values.add(29);
        values.add(39);
        values.add(36);
        values.add(45);
        values.add(24);
        values.add(28);
        values.add(20);
        values.add(15);

        overviewChartModel3 = createOverviewChart(labels, values);
        overviewChartModel3.setExtender("overviewChartExtender3");
    }

    public void createOverviewChart4(List<String> labels) {
        List<Object> values = new ArrayList<>();
        values.add(30);
        values.add(39);
        values.add(50);
        values.add(21);
        values.add(33);
        values.add(18);
        values.add(10);
        values.add(24);
        values.add(20);

        overviewChartModel4 = createOverviewChart(labels, values);
        overviewChartModel4.setExtender("overviewChartExtender4");
    }

Best Regards,

Code: Select all

// config.xhtml
<h:form id="layoutConfigForm">
       <p:remoteCommand name="refreshChart" update="@(.ui-chart)" />
       
       /* You can update all chart using remoteCommand when layout mode is changed */