<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  
  <div style="margin:auto" >
    <center>
    <button onclick="angular()"  id="angBtn">Angular</button>
    <button onclick="react()" id="reBtn">React</button>
    <button onclick="vue()" id="vueBtn">Vue</button>
  <p class="highcharts-description">
  Opinion Poll
  </p>
    </center>
  </div>
</figure>

#container {
  height: 400px; 
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px; 
  max-width: 800px;
  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;
}

chart = Highcharts.chart('container', {
  chart: {
    type: 'cylinder',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
    }
  },
  title: {
    text: 'Angular vs React vs Vue'
  },
     xAxis: {
            categories: ['Angular', 'React', 'Vue'],

        },
  plotOptions: {
    series: {
      depth: 25,
      colorByPoint: true,
      colors: ['#dd1b16', '#61dbfb', '#41B883']
    }
  },
  series: [{
    data: [35, 20, 45],
    name: 'Framework',
    showInLegend: false
  }]
});

function angular(){
  chart.series[0].setData([37,19,44])
  document.querySelector("#angBtn").disabled = true;
  document.querySelector("#reBtn").disabled = false;
  document.querySelector("#vueBtn").disabled = false;
}

function react(){
  chart.series[0].setData([34,22,44])
  document.querySelector("#reBtn").disabled = true;
  document.querySelector("#angBtn").disabled = false;
  document.querySelector("#vueBtn").disabled = false;
}

function vue(){
  chart.series[0].setData([34,19,46])
  document.querySelector("#vueBtn").disabled = true;
    document.querySelector("#reBtn").disabled = false;
  document.querySelector("#angBtn").disabled = false;
  
}