score:0

Accepted answer

i found out a solution by taking multiple canvases and drawing the stuck out lines and texts above and below it using javascript's 2d contexts. i brought the lines to touch the chartjs's doughnut chart by giving negative margins. responsiveness is still an issue but at least that's one way of doing it. i am posting the code here. screen size might dislocate the lines. you might wanna see the result on with full screen on your laptop.

<!doctype html>
<!--
to change this license header, choose license headers in project properties.
to change this template file, choose tools | templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            .chart-wrapper
            {
                width: 24rem;
                height: 24rem;
            }
            .debt-savings
            {
                margin-right: -15rem;
            }
            .needs
            {
                margin-left: -5.5rem;
            }
            .wants
            {
                margin-top: -6.8rem;
            }
        </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-gn5384xqq1aowxa+058rxpxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <br><br><br><br><br><br><br><br>
        </div>
        <div class="row d-flex justify-content-center">
            <div class="col-4 chart-wrapper debt-savings">
                <canvas id="debt-savings"></canvas>
            </div>
            <div class="col-4 d-flex justify-content-center">
                <div class="chart-wrapper">
                    <canvas    id="budget-chart"></canvas>
                </div>
                
            </div>
            <div class="col-4 chart-wrapper needs">
                <canvas id="needs"></canvas>
            </div>
            
        </div>
        <div  class="row d-flex justify-content-end">
            <div class="col-6 chart-wrapper wants">
                <canvas id="wants"></canvas>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
       
            // data for doughnut chart
        const data = {
            labels: [
              'debt & saving',
              'needs',
              'wants'
            ],
            datasets: [{
              label: 'my first dataset',
              data: [20//debtandsavingspercet
                  , 30//needspercet
                  , 50//wantspercet
              ],
              backgroundcolor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
              ],
              hoveroffset: 4
            }]
          };
        var ctx = document.getelementbyid("budget-chart").getcontext("2d");
        var mydoughnutchart = new chart(ctx, {
            type: 'doughnut',
            data: data,
            options: {
                legend:{
                    display:false,
                },
                responsive:true,
                maintainaspectratio:true,
            }
        });
        var debtandsavingcanvas = document.getelementbyid("debt-savings");
        debtandsavingcanvas.width  = 300;
        debtandsavingcanvas.height = 300;
        var debtandsavingctx = debtandsavingcanvas.getcontext("2d");        
        debtandsavingctx.font = "normal normal 500 40px georgia";
        debtandsavingctx.fillstyle = "green";
        debtandsavingctx.filltext("20%", 0, 100);
        debtandsavingctx.font = "16px georgia";
        debtandsavingctx.filltext("debt &", 100, 70);
        debtandsavingctx.filltext("savings", 100, 100);
        debtandsavingctx.font = "20px georgia";
        debtandsavingctx.fillstyle = "grey";
        debtandsavingctx.filltext("emergency savings,", 0, 134);
        debtandsavingctx.filltext("student loans, credit", 0, 154);
        debtandsavingctx.filltext("cards, etc.", 0, 174);
        debtandsavingctx.beginpath();
        debtandsavingctx.moveto(300, 150);
        debtandsavingctx.lineto(230, 110);
        debtandsavingctx.lineto(0, 110);
        debtandsavingctx.stroke();
        //
        // needs context 
        //
         var needscanvas = document.getelementbyid("needs");
        needscanvas.width  = 300;
        needscanvas.height = 300;
        var needsctx = needscanvas.getcontext("2d");        
        needsctx.font = "normal normal 500 40px georgia";
        needsctx.fillstyle = "purple";
        needsctx.filltext("53%", 30, 95);
        needsctx.font = "20px georgia";
        needsctx.filltext("needs", 110, 95);
        needsctx.font = "20px georgia";
        needsctx.fillstyle = "grey";
        needsctx.filltext("mortgage/rent, utilities,", 50, 134);
        needsctx.filltext("phone/internet, etc", 50, 154);
        //draw the line
        needsctx.beginpath();
        needsctx.moveto(0, 130);
        needsctx.lineto(30, 110);
        needsctx.lineto(200, 110);
        needsctx.stroke();
        
        //
        // wants context 
        //
         var wantscanvas = document.getelementbyid("wants");
        wantscanvas.width  = 300;
        wantscanvas.height = 300;
        var wantscanvas = wantscanvas.getcontext("2d");        
        wantscanvas.font = "normal normal 500 40px georgia";
        wantscanvas.fillstyle = "purple";
        wantscanvas.filltext("25%", 50, 95);
        wantscanvas.font = "20px georgia";
        wantscanvas.filltext("wants", 130, 95);
        wantscanvas.font = "20px georgia";
        wantscanvas.fillstyle = "grey";
        wantscanvas.filltext("mortgage/rent, utilities,", 50, 134);
        wantscanvas.filltext("phone/internet, etc", 50, 154);
        //draw the line
        wantscanvas.beginpath();
        wantscanvas.moveto(0, 80);
        wantscanvas.lineto(30, 110);
        wantscanvas.lineto(200, 110);
        wantscanvas.stroke();
    </script>
    </body>
</html>


Related Query

More Query from same tag