custom no data label in nvd3 scatter chart

Question

I am trying to have custom message instead of the "No Data Available" message which is displayed. I am using nvd3 scatter / bubble chart. I came across a suggestion here

data2 = [ 
  { 
  "key" : "A key" , 
  "values" : [[]]
  }
];

but I want to change the message. I looked at the source scatter.js but did not find "No Data Available" message. Do I need to modify another source file? How can I do so?

Townsend

Answer 1

Looking at the source, it seems that you can set the message using .noData():

chart.noData("Nothing to see here.");

Milone

Is there any way we can change the color as well ? – Charlettecharley

Of the string? You can select the element and change it directly. – Milone

Thanks for the comment. I have tried this but its not taking color value, however text-decoration works fine. text.nvd3.nv-noData{ color:"yellow"; text-decoration: underline; } – Charlettecharley

You might want to post a separate question about this. – Milone

Answer 2

If you happen to use the Angular NVD3 wrapper, the way to set the custom message is through chart options, simply:

$scope.options = {
    chart: {
      ...
      noData: 'Your custom message',
      ...
    }
  };

I have prepared a simple demo plunker: http://plnkr.co/edit/hORaQh?p=preview

Kemper