Variable radius pie

author(s): Grzegorz Blachliński

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.0.1/highcharts.js"></script>
<div id="container" style="height: 688px;margin-top:35px;width:1240px;overflow:auto;margin:auto;border-radius:6px;border:1px solid #dbdbdb;"></div>

CSS

#container {
	height: 500px;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

(input=>{

    var chartWrapper = $("<div></div>").appendTo("#container")
        .attr("id", "chart_wrapper");

    var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
        .attr("id", "chart_div");

    $('#chart_wrapper').append(`<style>
        #chart_wrapper * { font-size:16px } 
 #chart_wrapper{
 
 	width:1240px;
  height:688px;
   
  position:relative;

 /*IMAGE-GENERATOR-BEGIN-REMOVE*/
  padding: 35px 30px 20px 30px;
  /*IMAGE-GENERATOR-END-REMOVE*/

  box-sizing:border-box; 
  
 }
 
 #chart_div{
 	
  	width:100%;
    height:90%;
    overflow: visible;
 }
 
 #chart_wrapper p {
 	margin : 0px;
 }
 #chart_wrapper div {
 	margin : 0px;
  box-sizing:border-box;
 } 
  .topTwoPx{
 
    position: relative; top: 0px; 
    /*IMAGE-GENERATOR-BEGIN-REMOVE*/
    top:2px;
      /*IMAGE-GENERATOR-END-REMOVE*/
    
    }
 </style>`)




    $('#chart_wrapper').append(`<style>
            div.example {
padding: 0px;
background: #ffffff;  
}
div.footer-example {
padding: 5px;
background: #fcfcfc;  
}
/* Use for 1 lines of text before truncation */
.mle-1 {
overflow: hidden;
position: relative;
line-height: 1.5em;
max-height: 1em; 
text-align: center;
padding-right: 1em;
}

.mle-1:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}

.mle-1:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: #FFFFFF;
}


/* Use for 2 lines of text before truncation */
.mle-3 {
overflow: hidden;
position: relative;
line-height: 1em;
max-height: 2.9em; 
text-align: center;
padding-right: 1em;
}

.mle-3:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}

.mle-3:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: #FFFFFF;
}
.concepts {
font-weight:bold;
width:75px;
font-family:Arial;
font-size:15px;
color:#575757;
white-space: normal;
word-wrap:break-word;
} 


  
</style>`);



var chartHeader = `<div id=title></div>
                    <div ...