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?

score 17 · Accepted Answer · answered May 10 '14 at 14:38

17

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

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

answered May 10 '14 at 14:38

Lars Kotthoff

107,425
16
204
204

Is there any way we can change the color as well ? – TrexTroy Oct 08 '15 at 15:52
Of the string? You can select the element and change it directly. – Lars Kotthoff Oct 08 '15 at 16:12
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; } – TrexTroy Oct 08 '15 at 17:24
You might want to post a separate question about this. – Lars Kotthoff Oct 08 '15 at 17:30

score 8 · Answer 2 · answered Feb 11 '16 at 11:43

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

custom no data label in nvd3 scatter chart

2 Answers2

Linked