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" el 16 may. 2019 a las 15:43
  • Ya edite mi respuesta.
    – alanfcm
    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
    el 16 may. 2019 a las 16:25
  • De acuerdo lo tendré en cuenta gracias el 16 may. 2019 a las 16:26

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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