Monday, 21 October 2019

Add Text to Doughnut Chart - ChartJS

I have charts

<div class="col-xs-2"><canvas id="device"></canvas></div>
<div class="col-xs-2"><canvas id="host_name"></canvas></div>
<div class="col-xs-2"><canvas id="city"></canvas></div>
<div class="col-xs-2"><canvas id="org"></canvas></div>
<div class="col-xs-2"><canvas id="country"></canvas></div>
<div class="col-xs-2"><canvas id="region"></canvas></div>

enter image description here


CSS

<style type="text/css">
    .chart-inner {
        margin-top: -100px;
        margin-bottom: 100px;
    }
    .chart-inner h5 {
        margin-bottom: 5px;
        margin-top: 27px;
        font-size: 200px;
        color: red;
    }

</style>

I've tried to append text to the center

$('canvas#' + selector).append('<div class="chart-inner"><h5>' + selector + '</h5></div>');

It doesn't seem to come through.


But when I hide(), it works. All charts are hidden.

$('canvas#' + selector).hide();

What am I missing ?



from Add Text to Doughnut Chart - ChartJS

No comments:

Post a Comment