Accepted answer

Since you didn't shared the whole code to create the chart, this answer will deal with your question's title only:

How to create a chart inside a tooltip?

I'm not a d3.tip() user, since I create my own tooltips. But what you want is not complicated at all: As the tooltips are <div> elements, you can definitely add a SVG inside them.

However, you have to know where to create the SVG. So, in the following demo, I'm creating this d3.tip tooltip:

var tool_tip = d3.tip()
    .attr("class", "d3-tip")
    .offset([20, 120])
    .html("<p>This is a SVG inside a tooltip:</p>
        <div id='tipDiv'></div>");
    //div ID here --^

The important part here is this: there is a inner <div> inside the d3.tip div, with a given ID (in that case, tipDiv). I'm gonna use that ID to create my SVG inside the tooltip:

selection.on('mouseover', function(d) {;
    var tipSVG ="#tipDiv")
        //select the div here--^

Here is the demo:

var svg ="body")
  .attr("width", 300)
  .attr("height", 300);

var tool_tip = d3.tip()
  .attr("class", "d3-tip")
  .offset([20, 120])
  .html("<p>This is a SVG inside a tooltip:</p><div id='tipDiv'></div>");;

var data = [14, 27, 19, 6, 17];

var circles = svg.selectAll("foo")

circles.attr("cx", 50)
  .attr("cy", function(d, i) {
    return 20 + 50 * i
  .attr("r", function(d) {
    return d
  .attr("fill", "teal")
  .on('mouseover', function(d) {;
    var tipSVG ="#tipDiv")
      .attr("width", 200)
      .attr("height", 50);

      .attr("fill", "steelblue")
      .attr("y", 10)
      .attr("width", 0)
      .attr("height", 30)
      .attr("width", d * 6);

      .attr("x", 10)
      .attr("y", 30)
      .attr("x", 6 + d * 6)
  .on('mouseout', tool_tip.hide);
.d3-tip {
  line-height: 1;
  padding: 6px;
  background: wheat;
  border-radius: 4px solid black;
  font-size: 12px;

p {
  font-family: Helvetica;
<script src=""></script>
<script src=""></script>
<p>Hover over the circles:</p>

Related Query

More Query from same tag