highcharts free angular - ¿Cómo se cambia el color de cada categoría dentro de un gráfico de columnas de alto gráfico?




5 Answers

También puede establecer el color individualmente para cada punto / barra si cambia la matriz de datos para que sean objetos de configuración en lugar de números.

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

Ejemplo en jsfiddle

php npm

Tengo un gráfico de columnas que tiene varias categorías, cada una con un solo punto de datos (por ejemplo, como este ). ¿Es posible cambiar el color de la barra para cada categoría? es decir, ¿para que cada barra tenga su propio color único en lugar de que todo sea azul?







Puede agregar una matriz de colores en un gráfico de gráfico alto para cambiar el color del gráfico. Puede volver a organizar estos colores y también puede especificar sus propios colores.

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},



Simplemente agregue esto ... o puede cambiar los colores según su demanda.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });



solo ponga el gráfico

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart



Related


Tags

highcharts