SVG pie chart Text labels not showing using just css html and svg (no chart js or other)

Question

I can see "Project" my text in the editor window but cannot get it to show on the graph or in the pie wedge area. Any help would be greatly appreciated. I need the label text aligned to the right or to show on top. I stacked other images on top of the graph so I tried a z-index to do it. Here is my code.

/* SHOW LABEL ON HOVER */
jQuery(".group_path").hover(
  function() {
    jQuery(this).find(".text_toggle").css("display", "block");
  },
  function() {
    jQuery(this).find(".text_toggle").css("display", "none");
  }
);

/* Trying to get text to show as labels - also Jquery code in script file */

.text_toggle {
  display: none;
  fill: transparent;
}

.group_path:hover .text_toggle {
  display: block;
  font-size: 1em;
  text-align: right;
  z-index: 5;
}

I don't want to use jquery if I can avoid it

herrstrietzel · Accepted Answer

You face several problems:

text elements can't use any d attributes (preserved for path elements)
css property z-index won't have any effect on svg elements – you'll need to add labels on top of your pie chart segments
you need to get x/y coordinates for your label elements – js to the rescue!
ids are not ideal (starting with numbers, containing periods) – those elements are not selectable in css or js (unless you escape them)
(better close your segments' paths via z command)

How to get the right text anchor coordinates

For properly aligned text labels, we need to get the x/y coordinates of the semi-arc of each segment.
(illustrated by red circles)

The main concept is to check where pie chart wedges are intersecting a "centerline" circle: we need to add this auxiliary circle element with a radius between outer radius=1 and inner radius=0.8 – so our centerline circle needs to have a radius of 0.9.

Example 1: pre-processing (find x/y for text labels)

let pie = document.querySelector("svg");
let segments = pie.querySelectorAll(".group_path");
let labelGroupHtml = "";
let textanchors = "";

// auxiliary circle element to get label coordinates
let circleIntersect = document.querySelector(".circleIntersect");
let circleLength = circleIntersect.getTotalLength();
// define precision for intersection checking
let steps = circleLength / 180;
let circlePoints = [];
for (let i = 0; i < circleLength; i += steps) {
  let point = circleIntersect.getPointAtLength(i);
  circlePoints.push(point);
}

// find intersections beween each piechart slices and auxiliary circle
function getIntersect(path) {
  let intersects = [];
  let middlePoint = 0;
  for (let i = 0; i < circlePoints.length; i++) {
    let point = circlePoints[i];
    let isIntersect = path.isPointInFill(point);
    if (isIntersect) {
      intersects.push({
        x: +point.x.toFixed(2),
        y: +point.y.toFixed(2)
      });
    }
  }
  if (intersects.length) {
    // get segment's middle coordinates
    let midIndex = Math.ceil((intersects.length - 1) / 2);
    middlePoint = intersects[midIndex];
  }
  return middlePoint;
}

segments.forEach(function(el, i) {
  let segementId = "label_" + i;
  let path = el.querySelector("path");
  let labelText = path.getAttribute("data-label");
  // add generic labels if not defined
  labelText = labelText ? labelText : "Segment" + (i + 1);
  path.setAttribute("data-target", segementId);

  let intersect = getIntersect(path);
  if (intersect) {
    let midX = intersect["x"];
    let midY = intersect["y"];
    textanchors +=
      '';

    let label =
      '' +
      labelText +
      "";
    labelGroupHtml += label;
  }
});

pie.insertAdjacentHTML(
  "beforeend",
  '' + labelGroupHtml + ""
);

// just for illustrating the retrieved text anchors
pie
  .querySelector(".preprocessing")
  .insertAdjacentHTML(
    "beforeend",
    '' + textanchors + ""
  );

// event listeners
let pieSegemts = pie.querySelectorAll("path");
if (pieSegemts.length) {
  pieSegemts.forEach(function(segment, i) {
    segment.addEventListener("click", function(e) {
      /**
       * uncomment the closelabels call and
       * mouseleave event listener if you need only one segemnt to be active
       */
      /*
      closeLabels();
      */
      let labelSelector = e.currentTarget.getAttribute("data-target");
      let label = pie.querySelector("#" + labelSelector);
      label.classList.toggle("label_active");
      segment.classList.toggle("segment_active");
    });
    /*
    segment.addEventListener("mouseleave", function (e) {
      closeLabels();
    });
    */
  });
}

// hide other labels
function closeLabels() {
  let opened = pie.querySelectorAll(".label_active, .segment_active");
  opened.forEach(function(el, i) {
    el.classList.remove("label_active");
    el.classList.remove("segment_active");
  });
}

// ungroup elements – inherit properties
ungroup(".group_path");

function ungroup(selector) {
  let groups = document.querySelectorAll(selector);
  groups.forEach(function(group, i) {
    let attributes = [...group.attributes];
    let children = [...group.children];
    children.forEach(function(el, i) {
      attributes.forEach(function(att, i) {
        el.setAttribute(att["name"], att["nodeValue"]);
        el.classList.add("segment");
      });
      group.parentNode.insertBefore(el, group.nextElementSibling);
      group.remove();
    });
  });
}

// replace ids containing numbers
cleanNumIds();

function cleanNumIds() {
  let idEls = document.querySelectorAll("[id]");
  idEls.forEach(function(el, i) {
    let id = el.id;
    let idNum = (+id).toString();
    if (idNum === id) {
      el.setAttribute("data-id", id);
      el.id = "seg_" + id.replaceAll(".", "-");
    }
  });
}

body {
  font-family: "Sogoe UI", "Open Sans", Arial;
}

svg {
  display: inline-block;
  width: 20em;
  overflow: visible;
  border: 1px solid #ccc;
}

.segment {
  stroke: #fff;
  stroke-width: 0.0125;
}

.segment_active {
  opacity: 0.5;
}

.text_label {
  font-size: 0.1px;
  fill: #000;
  text-anchor: start;
  visibility: hidden;
}

.text_label,
.notSelectable {
  user-select: none;
  pointer-events: none;
}

.label_active {
  visibility: visible;
}

How it works:
We need to "travel" along the aforementioned centerline circle and check when segments intersects:
First we need to get this circles pathlength

by getTotalLength() (OK, we could have uses pathLength property as well ...)
then we split the circumference into segments resulting in an array of path length positions by getPointAtLength() . In this example 180 divisions/segments to provide enough precision when finding the ideal text x/y for a segment's label (with 100 divisions we might not get very thin pie wedges).
we can then check each path (pie segment) for points intersecting with the centerline circle by path.isPointInFill(point) and save them to an array of DOMPoints containing x/y coordinates (let intersects)
we get multiple intersecting points – the one we're interested in is the middle point (let midIndex = Math.ceil((intersects.length - 1) / 2))
now we can append elements to the pie chart svg with right x/y coordinates (the label text is retrieved from a data-attribute)

... quite a lot of js?

Once the pie chart's svg is optimized and transformed you can save it as a static asset (e.g. by inspecting it in dev tools) and remove the pre-processing functions like so:

let pie = document.querySelector("svg");
let segments = pie.querySelectorAll(".group_path");

// event listeners
// event listeners
let pieSegemts = pie.querySelectorAll("path");
if (pieSegemts.length) {
  pieSegemts.forEach(function (segment, i) {
    segment.addEventListener("mouseenter", function (e) {
      /**
       * uncomment the closelabels call and
       * mouseleave event listener if you need only one segemnt to be active
       */
      closeLabels();
     
      let labelSelector = e.currentTarget.getAttribute("data-target");
      let label = pie.querySelector("#" + labelSelector);
      label.classList.toggle("label_active");
      segment.classList.toggle("segment_active");
    });
    
    segment.addEventListener("mouseleave", function (e) {
      closeLabels();
    });
    
  });
}

function closeLabels() {
  let opened = pie.querySelectorAll(".label_active, .segment_active");
  opened.forEach(function (el, i) {
    el.classList.remove("segment_active");
    el.classList.remove("label_active");
  });
}

body {
  font-family: "Sogoe UI", "Open Sans", Arial;
}
svg {
  display: inline-block;
  width: 20em;
  overflow: visible;
  border: 1px solid #ccc;
}

.segment {
  stroke: #fff;
  stroke-width: 0.0125;
}

.segment_active {
  opacity: 0.5;
}

.text_label {
  font-size: 0.1px;
  fill: #000;
  text-anchor: start;
  visibility: hidden;
}
.text_label,
.notSelectable {
  user-select: none;
  pointer-events: none;
}

.label_active {
  visibility: visible;
}

The only js functions left are responsible for event binding (click, mouseover etc.) and toggling.

Edit: Finding label coordinates

you should also check out the way more elegant approach by Paul LeBeau (Pure svg pie chart, text align center)

SVG pie chart Text labels not showing using just css html and svg (no chart js or other)

Answers (1)

How to get the right text anchor coordinates

Example 1: pre-processing (find x/y for text labels)

... quite a lot of js?

Edit: Finding label coordinates

Related Questions