Diseño esperado marcado en cuadro rojo
¿Cómo se puede lograr un diseño así en gráficos altos?, especialmente en la zona de caja roja.
El diseño en el área del cuadro rojo puede tener diferentes degradados/colores, pero ¿cómo marcar exactamente ese área en gráficos altos sin puntos?
El caso de uso es que, supongamos que el usuario selecciona un rango de fechas y no hay datos para una sección específica en el gráfico como se indica en la captura de pantalla anterior.
Puede usar plotBands con relleno de patrón. Por ejemplo:
xAxis: { ..., plotBands: [{ from: -10, to: 0, color: { pattern: { path: { d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11', strokeWidth: 3 }, width: 10, height: 10, opacity: 0.4 } } }] }Demostración en vivo: http://jsfiddle.net/BlackLabel/Lunqzkgb/
Referencia de la API: https://api.highcharts.com/highcharts/xAxis.plotBands
Documentos: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills