Javascript graphic

Question

I have a javascript chart and would like to customize it. I want to change the numbers below the column to names (e.g., active) and also change the color of these columns. Could you help me? Follow my code.

var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 6,
beta: 16,
depth: 100,
viewDistance: 200
}
},
title: {
text: 'Clientes'
},
subtitle: {
text: 'Gráfico demonstrativo'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [500.9, 1000.5, 106.4, 129.2, 144.0]
}]
});
				
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
				
        
$('#sliders input').on('input change', function () {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
				
showValues();

#container, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#container {
    height: 400px; 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>
			<div id="sliders">
</div>

Answer 1

See the example below:

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 6,
      beta: 16,
      depth: 100,
      viewDistance: 200
    }
  },
  xAxis: {
    type: 'category'
  },
  title: {
    text: 'Clientes'
  },
  subtitle: {
    text: 'Gráfico demonstrativo'
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    "colorByPoint": true,
    data: [{
      "name": "Coluna 1",
      "y": 500.94,
      "drilldown": "Coluna "
    }, {
      "name": "Coluna 2",
      "y": 106.4,
      "drilldown": "Coluna 2"
    }, {
      "name": "Coluna 3",
      "y": 1000.5,
      "drilldown": "Coluna 3"
    }, {
      "name": "Coluna 4",
      "y": 144.0,
      "drilldown": "Coluna 4"
    }]
  }]
});

function showValues() {
  $('#alpha-value').html(chart.options.chart.options3d.alpha);
  $('#beta-value').html(chart.options.chart.options3d.beta);
  $('#depth-value').html(chart.options.chart.options3d.depth);
}


$('#sliders input').on('input change', function() {
  chart.options.chart.options3d[this.id] = parseFloat(this.value);
  showValues();
  chart.redraw(false);
});

showValues();

#container,
#sliders {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

#container {
  height: 400px;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>
<div id="sliders">
</div>

Was added :

 xAxis: {
    type: 'category'
  },

In séies it was accresentado:

"colorByPoint": true

and on date the column names