NVD3 Charts 'No Data' message not centered

Question

I'm using the latest version of NVD3, along with the recommended version of D3 from the NVD3 Github. I've noticed that on the discreetBar, multiBar and pieCharts, if not others, the No Data labels are not exactly centered. They are pushed off to the right a little bit.

I've been playing around in the code a little bit, but still haven't found a working fix.

The code that controls the positioning as found in multiBarChart.js

if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
    var noDataText = container.selectAll('.nv-noData').data([noData]);

    noDataText.enter().append('text')
      .attr('class', 'nvd3 nv-noData')
      .attr('dy', '-.7em')
      .style('text-anchor', 'middle');

    noDataText
      .attr('x', margin.left + availableWidth / 2)
      .attr('y', margin.top + availableHeight / 2)
      .text(function(d) { return d });

    return chart;
} else {
    container.selectAll('.nv-noData').remove();
}

Update A workaround that seems to be working for all the charts I am using is to have a matching rmargin right. By default, some of the charts have a left and bottom padding of 100. Adding a right: 100 will leave the noData messages (much closer to) dead centre.

Answer 1

I've changed the lines 1519-1542 to

nv.utils.noData = function(chart, container) {
var opt = chart.options(),
    margin = opt.margin(),
    noData = opt.noData(),
    data = (noData == null) ? ["No Data Available."] : [noData],
    height = nv.utils.availableHeight(opt.height(), container, margin),
    width = nv.utils.availableWidth(opt.width(), container, margin),
    x = margin.left + width/2,
    y = margin.top + height/2;

//Remove any previously created chart components
container.selectAll('g').remove();

var noDataText = container.selectAll('.nv-noData').data(data);

noDataText.enter().append('text')
    .attr('class', 'nvd3 nv-noData')
    .style('text-anchor', 'middle');

noDataText
    .attr('x', '50%')
    .attr('y', '50%')
    .text(function(t){ return t; });

In combination with following CSS:

.nvd3.nv-noData {
position: relative;
transform: translate(-50%, -50%) !important;
font-size: 24px;
color: #666;
font-weight: 200;
text-align: center;}

I have currently perfect centered no-data texts for all my charts (bar-charts, pie-charts, multibar, sunburst and area charts)

Answer 2

The easiest way is by adding a css rule in your global style file (no need to edit the js library), quite similar to the phkdev rule, but the most important is here :

:host >>> .nv-noData {
  position: relative;
  transform: translate(-50%, -50%) !important;
  text-align: center;
}

Edit : make sure you have the noData parameters in your chart options