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

highcharts pie

Question

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?

Answer 1

Agregue los colores que desea a los colors y luego configure colorByPoint en true .

colors: [
''#4572A7'',
''#AA4643'',
''#89A54E'',
''#80699B'',
''#3D96AE'',
''#DB843D'',
''#92A8CD'',
''#A47D7C'',
''#B5CA92''
],
plotOptions: {
column: {
colorByPoint: true
}
}

manifestación

Referencia:

• http://api.highcharts.com/highstock#colors
• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Answer 2

Sí, aquí hay un ejemplo en jsfiddle: http://jsfiddle.net/bfQeJ/

Highcharts.setOptions({
colors: [''#058DC7'', ''#50B432'', ''#ED561B'', ''#DDDF00'', ''#24CBE5'', ''#64E572'', ''#FF9655'', ''#FFF263'', ''#6AF9C4'']
});

El ejemplo es un gráfico circular pero puedes llenar la serie con todos los colores al contenido de tu corazón =)

Answer 3

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

Answer 4

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''
},

Answer 5

{plotOptions: {bar: {colorByPoint: true}}}

Answer 6

También puedes configurar la opción:

 {plotOptions: {column: {colorByPoint: true}}}

para más información lee docs

Answer 7

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
}
}
});

Answer 8

agregar propiedades:

 colors: [''Red'', ''Bule'', ''Yellow'']

Answer 9

solo ponga el gráfico

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

Answer 10

Como se menciona por antonversal, leer los colores y usar la opción de colores al crear el objeto gráfico funciona.

var chart3 = new Highcharts.Chart({colors: [''#458006'', ''#B0D18C'']});