Jqplot: append right-aligned text and stack donut chart

Question

I modified the Legend table HTML in the Chrome console to show the layout I need below. I've been trying to find out how to append and right-align some dynamic text (the data value) to the label td in the legend, but I haven't found figured it out yet. I saw a post here that could work, but I need more detail (the poster was suggesting an enhancement using objects no longer in the jqplot.js file and the link to a plugin is broken).

I appreciate any help with this. Thanks.

$(document).ready(function() {
      var data = [50, 18, 10];

      var tl_labels = [
        ["Purple"],
        ["Gray"],
        ["light green"]
        
      ];

      var tl_colors = ['#8F2DA3', '#939EA9', '#50E3C2', ];

      var plot1 = $.jqplot('chart1', [data], {
        seriesDefaults: {

          renderer: $.jqplot.DonutRenderer,
          rendererOptions: {
            sliceMargin: 0,
            startAngle: -90,
            showDataLabels: false,
            dataLabels: tl_labels,
            totalLabel: false
          }
        },
        grid: {
          background: '#ffffff',
          drawBorder: false,
          shadow: false
        },
        legend: {
          show: true,
          location: 'ne',
          placement: 'outside',
          background: '#ffffff',
          position: 'relative',
          border: 'none',
          labels: tl_labels
        },


        seriesColors: tl_colors
      });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>


<div id="chart1" style="height:300px;width:350px; "></div>

Here are two screenshots for what I am looking for:

Answer 1

You can try this out. You can also add another td on legend using jquery after plotting the chart.

$(document).ready(function() {
      var data = [50, 18, 10];
        
      var tl_labels = [
        ["Purple<span style='float:right'>20%</span>"],
        ["Gray<span style='float:right'>10%</span>"],
        ["light green<span style='float:right'>5%</span>"]
        
      ];

      var tl_colors = ['#8F2DA3', '#939EA9', '#50E3C2', ];

      var plot1 = $.jqplot('chart1', [data], {
        seriesDefaults: {

          renderer: $.jqplot.DonutRenderer,
          rendererOptions: {
            sliceMargin: 0,
            startAngle: -90,
            showDataLabels: false,
            dataLabels: tl_labels,
            totalLabel: false
          }
        },
        grid: {
          background: '#ffffff',
          drawBorder: false,
          shadow: false
        },
        legend: {
          show: true,
          location: 'ne',
          placement: 'outside',
          background: '#ffffff',
          position: 'relative',
          border: 'none',
          labels: tl_labels,
          
        },


        seriesColors: tl_colors
      });
      $("td.jqplot-table-legend:nth-child(2)","#chart1").width(100)
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>


<div id="chart1" style="height:300px;width:350px; "></div>