title: Tooltip C3JS - Add a row in the table
body: <p>I'm trying to add a footer on the table displayed in the tooltip. Inside this row I would like to show a particular data loaded from a json file.</p>
  
  <p>Chart:</p>
  
  <pre><code>&lt;script&gt;
      var scene;
      $.getJSON('assets/json/chartc3.json', function (data) {
          scene = data;
          var chart = c3.generate({
              bindto: '#chartc3',
              data:
                  {
                      json: scene,
                      keys:
                      {
                          x: 'round',
                          value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
                      },
                      types: {
                          Marketable: 'area'
                      },
                      colors: {
                          Marketable: '#A09FA2',
                          'Total Requested Capacity': '#272E80',
                          'Your Bid': '#8EBF60'
                      }
                  },
              axis:
              {
                  x: {
                      tick:
                      {
                          culling:
                          {
                              max: 10
                          }
                      },
                      type: 'category'
                  },
                  y:
                  {
                      min: 0,
                      padding: {
                          bottom: 0
                      },
                      tick:
                      {
                          values: [[0], [d3.max(d3.values(scene))]],
  
                          format: function (d) { return d3.format(',f')(d) + ' kWh/h' }
                          //or format: function (d) { return '$' + d; }
                      }
                  }
              },
              tooltip: {
                  contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                      var $$ = this, config = $$.config, CLASS = $$.CLASS,
          titleFormat = config.tooltip_format_title || defaultTitleFormat,
          nameFormat = config.tooltip_format_name || function (name) { return name; },
          valueFormat = config.tooltip_format_value || defaultValueFormat,
          text, i, title, value, name, bgcolor;
  
                      // You can access all of data like this:
                      for (i = 0; i &lt; d.length; i++) {
                          if (!(d[i] &amp;&amp; (d[i].value || d[i].value === 0))) { continue; }
  
                          // ADD
                          if (d[i].name === 'data2') { continue; }
  
  
                          if (!text) {
                              title = 'MY TOOLTIP'
                              text = "&lt;table class='" + CLASS.tooltip + "'&gt;" + (title || title === 0 ? "&lt;tr&gt;&lt;th colspan='2'&gt;" + title + "&lt;/th&gt;&lt;/tr&gt;" : "");
                          }
  
                          name = nameFormat(d[i].name);
                          value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
                          bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
  
                          text += "&lt;tr class='" + CLASS.tooltipName + "-" + d[i].id + "'&gt;";
                          text += "&lt;td class='name'&gt;&lt;span style='background-color:" + bgcolor + "; border-radius: 5px;'&gt;&lt;/span&gt;" + name + "&lt;/td&gt;";
                          text += "&lt;td class='value'&gt;" + value + "&lt;/td&gt;";
                          text += "&lt;/tr&gt;";
                      }
  
                      **var surchargedata;
                      $.getJSON('assets/json/surcharge.json', function(data)
                      {
                          console.log("Prima"+text);
                          surchargedata=data;
                          text += "&lt;tr class='" + CLASS.tooltipName + "-Surcharge" + "'&gt;";
                          text += "&lt;td class='name'&gt;" + surchargedata[i].Surcharge+ "&lt;/td&gt;";
                          text += "&lt;td class='value'&gt;" + surchargedata[i].Surcharge+ "&lt;/td&gt;";
                          text += "&lt;/tr&gt;&lt;/table&gt;";
                          console.log(text);
                      })**
  
                      return text;
                  }
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I printed the log and the table seems generated well but if you have a look at the tooltip :</p>
  
  <p><img src="https://i.stack.imgur.com/0ade9.png" alt="enter image description here"></p>
  
  <p>I can't see the last row.</p>
  
  <p>Here the log for the table generated:</p>
  
  <pre><code>    &lt;table class='c3-tooltip'&gt;
      &lt;tr&gt;
          &lt;th colspan='2'&gt;MY TOOLTIP&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class='c3-tooltip-name-Marketable'&gt;
          &lt;td class='name'&gt;&lt;span style='background-color:#A09FA2; border-radius: 5px;'&gt;
              &lt;/span&gt;Marketable
          &lt;/td&gt;
          &lt;td class='value'&gt;5,220,593 kWh/h&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='c3-tooltip-name-Total Requested Capacity'&gt;
          &lt;td class='name'&gt;&lt;span style='background-color:#272E80; border-radius: 5px;'&gt;
              &lt;/span&gt;Total Requested Capacity
          &lt;/td&gt;
          &lt;td class='value'&gt;16,449,051 kWh/h&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='c3-tooltip-name-Your Bid'&gt;
          &lt;td class='name'&gt;
              &lt;span style='background-color:#8EBF60; border-radius: 5px;'&gt;
              &lt;/span&gt;Your Bid
          &lt;/td&gt;
          &lt;td class='value'&gt;100,000 kWh/h
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='c3-tooltip-name-Surcharge'&gt;
          &lt;td class='name'&gt;50.38&lt;/td&gt;
          &lt;td class='value'&gt;50.38&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt; 
  </code></pre>