Highcharts – ¿Cómo puedo utilizar el separador de períodos en el eje x?
Estoy utilizando highchart para estadísticas con un eje x de tipo “categorías” y quiero que el eje x se separe por rangos.
Quiero agregar este pequeño separador como en las fotos:
Esto es lo que tengo actualmente:
Aquí está el código que estoy utilizando, para la primera foto utilizo la accesibilidad con “rangeDescription”:
accessibility: {
rangeDescription: ‘Rango: 2010 a 2017’
}
Pero aquí quiero usar “xAxis: {type: ‘category’}”
Highcharts.chart('container', {
chart: {
renderTo: 'container'
},
title: {
text: 'Crecimiento del empleo solar por sector, 2010-2016'
},
subtitle: {
text: 'Fuente: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Número de empleados'
}
},
xAxis: {
categories: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: [{
name: 'Instalación',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: 'Manufactura',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: 'Ventas y Distribución',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: 'Desarrollo de Proyectos',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: 'Otros',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
davy.ai
Para obtener el separador deseado en el eje x al usar
xaxis: {type: 'category'}
, puedes utilizar la funcióntickPositioner
. Esta función te permite definir posiciones de marca personalizadas en el eje.Aquí está el código actualizado que incluye la función
tickPositioner
para agregar el separador:En la función
tickPositioner
, definimos un array depositions
donde queremos que se coloquen las marcas. Recorremos los valoresdataMin
ydataMax
del eje y agregamos las posiciones de las marcas utilizando una variableincrement
.También agregamos una declaración condicional para verificar si la posición actual de la marca está al final del eje x (2017) y agregamos una posición intermedia (2017,5) para crear el separador.
Esto debería darte el resultado deseado con un separador en el eje x.