// JS
var chart = JSC.chart('chartDiv', {
  defaultSeries: {
    type: 'pieDonut',
    angle: {orientation: -225,sweep: 270 },
    shape: {center: '50%,50%' }
  },
  legend_visible: false,
  title_label_text: 'The population of the USA in 2016',
  defaultPoint: {
    tooltip: '<b>%name</b><br/>%yValue'
  },
  series: [
    {
      shape: {  size: '300',  innerSize: '80%'},
      points: [
        {
          name: 'Population ages 0-14',
          y: 61030000,
          label: {
            text: '%name<br>%percentOfSeries%',
            offset: '-290, 0',
            line_opacity: 0
          }
        },
        {
          y: 262727000,
          color: ['lightgray',0.5 ],
          tooltip: ''
        }
      ]
    },
    {
      shape: {  size: '200',  innerSize: '70%'},
      points: [
        {
          name: 'Population ages 15-64',
          y: 213650000,
          label: {
            text: '%name<br>%percentOfSeries%',
            offset: '-250, -85',
            line_opacity: 0
          }
        },
        {
          y: 110107000,
          color: ['lightgray',0.5 ],
          tooltip: ''
        }
      ]
    },
    {
      shape: {  size: '100',  innerSize: '45%'},
      points: [
        {
          name: 'Population ages 65 and above',
          y: 49077000,
          label: {
            text: '%name<br>%percentOfSeries%',
            offset: '-230, 10',
            line_opacity: 0
          }
        },
        {
          y: 274680000,
          color: ['lightgray',0.5 ],
          tooltip: ''
        }
      ]
    }
  ]
});