JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
    
    <div class="col-md-3 col-sm-4 col-xs-4">
        <div class="segment-card" data-share="2968" data-total="19596">
            <div class="segment-head">Kleinwagen</div>
            <div class="segment-body">
                <canvas width="40" height="40"></canvas>
            </div>
            <div class="segment-footer">Sep. 2017 -11 %</div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-4 col-xs-4">
        <div class="segment-card" data-share="3900" data-total="75557">
            <div class="segment-head">Kompaktklasse</div>
            <div class="segment-body">
                <canvas width="40" height="40"></canvas>
            </div>
            <div class="segment-footer">Sep. 2017 + 37 %</div>
        </div>
    </div>
    
</div>
</div>

CSS

.segment-card{
    position: relative;
    height: 200px;
}

canvas{
    
}

JavaScript

/*-------------------- ------------------ -----------------------*/





$('.segment-card canvas').map(function(){
	var $thisParent = $(this).parents('.segment-card');
    
	$(this).css({
    	width: '100%',
        height: ($thisParent.height() - 50) + 'px'
    })
    
    this.width = this.offsetWidth;
    this.height = this.offsetHeight
    
    
    var thisShare = parseInt($thisParent.data('share'));
    var thisRest = parseInt($thisParent.data('total')) - thisShare;

	var data = {
        datasets: [{
            data: [thisShare, thisRest],
            backgroundColor: [ '#005086', '#bbb'],
            borderColor: ['#003084', '#aaa']
        }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        //labels: [ 'Anteil', 'Gesamt' ],
    };
    
   	var ctx = this.getContext('2d');
    var myPieChart = new Chart(ctx,{
        type: 'pie',
        data: data,
        options:{
            legend: {
                display: false
              },
            pieceLabel: {
              // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
              render: 'percentage',

              // precision for percentage, default is 0
              precision: 2,

              // identifies whether or not labels of value 0 are displayed, default is false
              showZero: true,

              // font size, default is defaultFontSize
              fontSize: 17,

              // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
              fontColor: '#fff',

              // font style, default is defaultFontStyle
              fontStyle: 'normal',

              // font family, default is defaultFontFamily
              fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

              // draw text shadows under labels, default is false
              textShadow: true,

              // text shadow...