quisiera hacer una consulta acerca de la librería Highcharts ya que aún estoy practicando con esta no conozco mucho sobre esta. ¿Es posible cambiar el color de una categoría luego de que se presione sobre su valor?
Este es el gráfico que estoy utilizando
Highcharts.chart('container', {
title: {
text: null
},
chart: {
type: "areaspline",
spacingLeft: 0,
spacingRight: 0,
zoomType: 'x',
events: {
load: function() {
var chart = this,
series = this.series[0],
xAxis = chart.xAxis[0],
newStart = series.xData[1],
newEnd = series.xData[7];
xAxis.setExtremes(newStart, newEnd);
}
}
},
tooltip: {
pointFormat: "<b>{point.y}</b>",
backgroundColor: null,
style: {
color: "#F37198",
padding: 0,
fontSize: "18px"
},
shadow: 0,
borderWidth: 0,
outside: true,
useHTML: true,
formatter: function() {
return "<b>" + this.y + "</b>";
}
},
plotOptions: {
areaspline: {
color: "#fdd4db",
lineColor: "#f37198",
lineWidth: 2.5,
marker: {
enabled: true,
symbol: "circle",
radius: 6,
fillColor: "#f37198",
lineColor: "white",
lineWidth: 2,
states: {
hover: {
enabled: true,
radiusPlus: 0,
lineWidthPlus: 0
}
}
},
states: {
hover: {
lineWidthPlus: 0,
halo: {
opacity: 0.5,
size: 16,
attributes: {
fill: "#f15887",
}
},
},
},
}
},
xAxis: {
allowDecimals: false,
categories: ['28/04', '29/04', '30/04', '01/05', '02/05', '03/05', '04/05', '05/05', '06/05'],
gridLineWidth: 1,
gridLineColor: '#F3F0F0',
tickmarkPlacement:'on',
lineWidth: 0,
opposite: true,
startOnTick: true,
labels: {
style: { color: "#B3B2B2" , fontSize: "14px" , textOverflow : "none" },
},
},
legend: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
visible: false,
},
series: [{
data: [0, 12.2, 8.6, 7.6, 8.1, 7.9, 10.1, 7.5, 0],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
Agradecería mucho su ayuda