nvd3 charts - changing text color in hover boxes

Question

All of my charts, regardless of type, have the popover/hover box with a dark grey (almost black) background with black text - making it almost impossible to read. The color segment of the chart appears in the hover box, but the text and labels are all in black.

How can I change the text color in the hover boxes? Is this a tooltip item or is it chart specific?

Here is a sample of one of my charts JS, can the hover box text color be set in options or do I need to find the setting in the CSS file - and if so, which setting is it? :

    /**
     * Widget 5
     */
    var widget5Option = '3M';
    // Main Chart
    nv.addGraph(function ()
    {
      var chart = nv.models.multiBarChart()
        .options(
            {
                color       : ['#03a9f4', '#b3e5fc'],
                margin      : {
                    top   : 48,
                    right : 16,
                    bottom: 16,
                    left  : 32
                },
                clipEdge    : true,
                groupSpacing: 0.3,
                reduceXTicks: false,
                stacked     : false,
                duration    : 250,
                x           : function (d)
                {
                    return d.x;
                },
                y           : function (d)
                {
                    return d.y;
                },
                yTickFormat : function (d)
                {
                    return d;
                }
            }
        );

    var chartd3 = d3.select('#widget5-main-chart svg')
    var chartData;

    initChart();

    nv.utils.windowResize(chart.update);

    $(window).bind('update:widget5', function ()
    {

        initChart();
    })

    function initChart()
    {
        chartData = data.widget5.mainChart[widget5Option];
        chartd3.datum(chartData).call(chart);
    }

    return chart;
});

rolinger rolinger · Accepted Answer · 2019-12-19T12:13:41

Ok...I finally found the CSS value to change the color of the text in the popover on various chart graphs.

In nv.d3.min.css, there is the value .nvtooltip - there are various .nvtooltip sub definitions but the very first one is defined as:

.nvtooltip{position:absolute;color:rgba(0,0,0,1);padding:1px;z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.5);border-radius:4px}

I changed color:rbga(0,0,0,1) to color:white

Took me a day to find it because its only appears in the hover over popup table, which you can't put your mouse into because the popup moves with your mouse and is always about 1/2" away from mouse pointer - thus I could click on the popup over using Dev Tools Inspector to see what CSS values are assigned to the popup. Very annoying.

nvd3 charts - changing text color in hover boxes

1 Answers