Cómo evitar la superposición de columnas en Highcharts

Question

Creo que esta es una pregunta general que no necesita demasiada información de mis datos Highcharts.

Quiero evitar que las columnas se superpongan entre sí, ¿cómo puedo hacer esto?

Ver imagen siguiente enlace sobre cómo es ahora

http://highslide.com/forum/download/file.php?id=3157

jsFiddle: http://jsfiddle.net/Dzs5q/

Answer 1

Por favor, tratar de reproducir el error aquí @http://jsfiddle.net/jugal/bgNBG/

Highcharts por defecto reduce inteligentemente ancho de las columnas si hay demasiados de ellos a fin de evitar la superposición .

Las columnas tienden a solaparse si se ha anulado el comportamiento predeterminado antes mencionado especificando column.pointWidth

column: {   
     pointWidth : 10 
    } 

por ejemplo: @http://jsfiddle.net/jugal/bgNBG/2/

Así que para evitar la superposición, veo dos opciones que tiene.

Opción n. ° 1. Retire la column.pointWidth
Esto hará que las columnas más delgadas con el fin de no solapar
por ejemplo: @http://jsfiddle.net/jugal/bgNBG/

Opción 2 #. Usar column.dataGrouping
Esto ayudará a tener un ancho constante de columnas, pero reduciendo (al agruparlas) el número de columnas para evitar el desorden/solapamiento.

dataGrouping = { 
    groupPixelWidth: 40, // Minimum width for each column 
    units: [[   // Permissible groupings 
     'day', 
     [1, 2, 3,4,5,6] // 1,2,3,4,5,6 days may be grouped into 1 column 
     ]] 
} 

por ejemplo: @http://jsfiddle.net/jugal/JraJW/4/ pregunta similar @https://stackoverflow.com/a/12354111/1566575

Answer 2

La mejor manera de controlar las columnas y asegurarse de que no se apilan/superposición de una sobre la otra es controlando el ancho del gráfico. puedes hacer esto dentro del <div>.

• CSS: min-width ~ permite que el div cambie de tamaño, pero restrinja su funcionamiento por debajo de cierto ancho. Haces esto porque sabes que una vez que está debajo de ese ancho, las cosas comienzan a difuminarse juntas y no se pueden leer.
• CSS: width ~ fuerza el ancho del gráfico para permitir un determinado valor.
• CSS: no width set ~ aviso si reduce la ventana del navegador hasta cierto punto, comienza a hacer que el cuadro sea ilegible.

Controlando el ancho del div que contiene y rotando la etiqueta como c0deNinja sugerido, puede evitar la mayoría de los problemas de sobreposición/superposición. Sin embargo, si el gráfico tiene muchos puntos de serie/datos, incluso esto no ayudará.

Answer 3

Mi problema era similar y que no conseguía nada con las soluciones que se movían artículos a la secundaria eje etc. Entonces me encontré se reconocía mi eje x
como un continuo (en este caso: fecha) y las dos columnas superpuestas compartían el mismo valor de x.

Resolví el problema seleccionando el eje x, encontré la opción llamada "tipo de eje" y deseleccioné "seleccione automáticamente en base a datos" cambiándolo a "eje de texto". Eso tiene mis columnas una al lado de la otra.

Un poco atrasado para su problema pero tal vez útil.