Add ability to use CSS classes on SVG charts about peity HOT 2 OPEN

That's a really good idea (both adding a class option and exposing the added elements), I can't believe it hasn't been suggested before now 💯

You're right, there's nothing available that exposes the added elements directly but there is a possible workaround using the official (but undocumented 😬) after hook. The following includes two cases, styling based the segment position (simple and generic), and styling based on the value of the segment (a bit more complicated and app-specific).

CodeSandbox: https://codesandbox.io/s/happy-sara-y08767

$(".donut").peity("donut", {
  radius: 40,
  after() {
    const children = this.$svg.children();
    children.each(function () {
      this.removeAttribute("fill");
      let className;
      if (children.length === 2) {
        className = "slice";
      } else {
        const value = parseInt(this.getAttribute("data-value"));
        className = value > 30 ? "large" : "medium";
      }
      this.setAttribute("class", className);
    });
  }
});

.slice:nth-child(odd) {
  fill: purple;
}
.slice:nth-child(even) {
  fill: pink;
}

.medium:nth-child(odd) {
  fill: yellow;
}
.medium:nth-child(even) {
  fill: orange;
}

.large {
  fill: red;
}

If you only want to style based on the position of the segment then you'd only remove all fills in the after hook and could rely entirely on CSS selectors:

.donut + svg > path:nth-child(odd) {
  fill: yellow;
}

from peity.

You could also add attributes or classes (by default) to the rendered items, which I can affect w/ CSS. Something like:

<svg ..>
  <path .. data-peity-part="1" /> <-- one slice of pie
  <path .. data-peity-part="2" /> <-- two slice of pie
</svg>

This could allow others to also interact with the SVG elements, like adding click handlers and whatnot. :)

from peity.