0
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>
Excellent! It was exactly what I needed. Mto thanks.
– Carlos
One last question, where in the code change the colors as I want? Is that I do not have much experience with javascript.
– Carlos
I put in the issue
– Marciano Machado
But how can I change the color according to my preference? Example: put the color of the first column to green, the third to orange and etc ... If I can help you with that question I’d appreciate.
– Carlos