Estoy tratando de crear un gráfico de líneas, en el que si todos los valores de la serie en particular son cero, quiero que la línea se dibuje en la parte inferior sobre la línea del eje x. Pero parece que la línea del eje x tiene preferencia sobre la línea de la serie. ¿Hay alguna forma de cambiar eso?
A continuación se muestra mi configuración:
xAxis: { type: "datetime", tickmarkPlacement: "on", lineWidth: 10, lineColor: 'red', }, yAxis: { min: 0, minRange : 0.1, title: { text: "" } }, plotOptions: { line: { softThreshold: false } },Ejemplo: http://jsfiddle.net/shivajyothibalavikas/twxs7mL2/3
En el ejemplo anterior, el color de la línea del eje es rojo y el color de la línea de la serie es negro. pero el rojo lleva la preferencia. Quiero que la línea negra tenga preferencia al mostrar
No es posible mover una línea de serie por encima de una línea de eje mediante opciones en la API de Highcharts. Como solución, puede usar la clase Highcharts.SVGRenderer y dibujar una línea personalizada en la parte inferior del gráfico.
chart: { ..., events: { render: function() { const chart = this; const x1 = chart.plotLeft; const x2 = x1 + chart.plotWidth; const y = chart.plotTop + chart.plotHeight; if (!chart.customLine) { chart.customLine = chart.renderer .path().attr({ stroke: 'red', 'stroke-width': 10 }).add(); } chart.customLine.attr({ d: ['M', x1, y, 'L', x2, y] }); } } }Demostración en vivo: http://jsfiddle.net/BlackLabel/70d6sg2o/
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer