Vertical to Radial Full Stacked Bars

Full Stacked Radial Bar charts take multi-series Full Stacked Column charts and make them circular, joining both their vertical ends into a radial area. Pick up a chart app and compare its Full Stacked Columns chart with its Full Stacked Radial Bars chart. We used similar values for all these charts, except Full Stacked Column charts show less data. Some of these Full Stacked Radial Bar charts have been emulated - usually with polar charts - when not supported by design by their chart applications.

by cristiscu

HTML

<link href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }

JavaScript

var chart = null;
anychart.onDocumentReady(function () {
   // color palette
   var colorPalette = ["#007c9c", "#019fcc", "#8fcd3e", "#82b93a", "#638a2d"];
   // JSON chart options
   var options = {
      chart: {
         container: "chart_div",
         type: 'polar',
         animation: {
            // animation is disabled by default (no need for enabled: false)
            enabled : true,
            duration: 1000,
         },
         // credits are visible by default, in trial version (no need for credits: { enabled: true })
         credits: {
            enabled: false
         },
         // crosshairs are hidden by default (no need for crosshair: false)
         background: {
            // background is visible by default (no need for enabled: true)
            fill: "transparent",
         },
         title: {
            // chart title is visible by default (no need of enabled: true)
            enabled: false,
         },
         legend: {
            // legend is visible by default (no need for enabled: true)
            enabled: false,
         },
         xAxis: {
            // X axis caption is visible by default (no need for enabled: true)
            enable: false,
            title: false,
            labels: false,
            ticks: false,
            minorTicks: false,
         },
         yAxis: {
            // Y axis caption is visible by default (no need for enabled: true)
            enable: false,
            stroke: {
               thickness: 0
            },
            title: {
               enabled: false
            },
            labels: {
               enabled: false,
               format: "",
            },
            ticks: false,
            minorTicks: false,
         },
         xScale: {},
         yScale: {
            minimum: 0,
         },
         grids: [{
            // horizontal grid lines are visible by default (no need for enabled: false)
            enable: false,
            stroke: {
            ...