Is this graph possible using chart.js?

by

0👍

✅

I think that´s not in the standard of chart.js

I have made an short snippet for an other circled chart. You can take this as basis for resolving your problem. The routines are from follwing link.

How to calculate the SVG Path for an arc (of a circle)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>svgPercent</title>
</head>
<body>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path id="arc1" fill="none" stroke="#ddd" stroke-width="20" stroke-linecap="round"/>
        <path id="arc2" fill="none" stroke="#00f" stroke-width="20" stroke-linecap="round"/>
    <text x="50%" y="40%"
        font-family="Arial"
        font-weight="bold"
        font-size="50"
        alignment-baseline="middle" text-anchor="middle">75</text> 
    <text x="50%" y="60%"
        font-family="Arial"
        font-weight="bold"
        font-size="16"
        alignment-baseline="middle" text-anchor="middle">73 (+2%)</text> 
    <line x1="100" y1="150" x2="100" y2="180" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/>		
        <line x1="100" y1="150" x2="105" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/>	
       <line x1="100" y1="150" x2="95" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/>	
  </svg>
  <script>
  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 210, 510));
document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 210, 360));
  </script>
</body>
</html>

Leave a comment