0

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>

Click sobre el Marcador

Cambia el Color del label

Agradecería mucho su ayuda

2 respuestas 2

3

Claro que si se puede, necesitas manejar el evento click en los point asi:

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        this.color="red";
                        $($(".highcharts-axis-labels:first text")[this.index]).css({fill: "red"});
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

2
  • Disculpe, no explique bien lo que necesitaba. Lo que busco es que la categoría "30/04" cambie al color rojo cuando presiono sobre el marcador con el valor "8.6" Commented el 16 may. 2019 a las 15:43
  • Ya edite mi respuesta.
    – alanfcm
    Commented el 16 may. 2019 a las 16:07
-1

Conseguí una solución gracias a esta respuesta

https://www.highcharts.com/forum/viewtopic.php?f=9&t=42012&p=147168#p147168

Aquí adjunto el gráfico que muestra lo que necesito

https://jsfiddle.net/BlackLabel/qLmhz78d/

2
  • Aunque esto teoricamente solucione la pregunta, seria preferible que incluyas las partes esenciales en la respuesta aqui, y dejes el link solo como referencia. Las respuestas que son solo enlaces se consideran de baja calidad
    – gbianchi
    Commented el 16 may. 2019 a las 16:25
  • De acuerdo lo tendré en cuenta gracias Commented el 16 may. 2019 a las 16:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.