0
I would like to know how to change the name (series) displayed when hovering the mouse in the chart column. I looked into it and I couldn’t get an answer. Thank you for anyone who can help me. Follows the code:
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>
Thank you very much, that’s right.
– Carlos