score:5
This is a much simpler solution than anything I'm seeing for answers so far:
xAxis: {
categories:[]
}
.
series: [{
data: [{name:'Test 1',y:20,color:'red'},
{name:'Test 2',y:20,color:'blue'},
{name:'Test 3',y:40,color:'green'}]
}]
Example:
Although unless you have a really good reason for having each bar be a different color, it usually just adds unnecessary visual clutter and you're better off leaving them a single color.
score:0
Check this out
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories:['Test 1', 'Test 2', 'Test3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
//colorByPoint: true
},
series: {
colorByPoint: true
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{
data: [40,20,20]
}]
});
});
score:1
Try this:
xAxis: {
categories: ['Test', 'Test', 'Test'],
title: {
text: null,
}
},
And in series part:
series: [{
name: 'Values',
data: [20,20,40]
},]
EDITED:
You are using three group so you need to modify your data format. If you want the different color then try this:
series: [{
name: 'Values',
data: [20,0,0]
},
{
name: 'Values',
data: [0,20,0]
},
{
name: 'Values',
data: [0,0,40]
},]
score:1
xAxis: {
categories: ['Test1', 'Test2', 'Test3']
}
For the series, this is quite dirty but it works:
series: [{
name: 'Test1',
data: [20, 0, 0]
}, {
name: 'Test2',
data: [0, 20, 0]
}, {
name: 'Test3',
data: [0, 0, 40]
}
Source: stackoverflow.com
Related Query
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Treemap in highcharts display series name and value in treemap only
- Highcharts Line Chart, display series name at the end of line series
- Highcharts - Sankey chart - How to display some series dataLabels name into icon or some different name
- Highcharts : Display static Y axis labels from array when series data is null , else auto generated label
- HighCharts Hide Series Name from the Legend
- Highcharts doesn't display series with lots of data points
- Display tooltip for invisible series in Highcharts
- remove series by name or id in highcharts
- Highcharts - How to hide series name and Y value in tooltip
- Highcharts display series.name on X Axis
- Highcharts - Display only year in x axis and stop auto formatting
- Highcharts - get visible series name dynamically
- Highcharts Custom display of tooltips, based on data series values
- Get axis name in tooltip on Highcharts
- Highcharts - Tooltip and series name are out of their boxes in chrome
- Showing HighCharts series name on x-axis and in legend
- Display HH:MM on y axis highcharts
- How to remove a series in Highcharts by name
- Highcharts - how to create multiple y axis and group the data series
- how to display 2 same highcharts without duplicate the code
- Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis
- Is there a way to change the display value in series using highcharts
- How to display rounded corners in a highcharts column on a Y Axis that starts above 0
- How to get Series Name Based on Selection in Highcharts
- Missing series name as label in highcharts heatmaps
- Highcharts datetime axis overlap with a long time series
- Highcharts - Add Series Name As X-Axis Label
- How to display line break for irregular time series with highcharts
- Display series labels at the end of each line in Highcharts Editor
More Query from same tag
- In HighCharts how to set number of xAxis autoly?
- Changing yAxis and plotOptions for drilldown
- What type of date/time format is this?
- Images on Highchart
- Highcharts: set regular intervals on xaxis
- How can I read an Excel File with JavaScript (without ActiveXObject)
- Highcharts linked views
- HighCharts is not defined
- Highcharts window while decreasing not working
- How to add data dynamically to drilldown maps?
- How to add vertical lines to graph with HighStocks or HighCharts?
- Using Highcharts Export Server, how to include commas in labels?
- Highcharts Map not rendering no errors
- Stacked Bar Chart: Week vs Week
- Highcharts - selection error with live data and different time intervals
- blank page in Highcharts
- change barchart background color dynamically in highcart
- Highcharts problems
- How to use highmaps in react?
- testing React Highcharts config object with formatter callback
- highcharts tooltip not moving next point
- Highcharts multiple legends
- how to reduce the distance b/w the column contains 2 column graphs in highcharts
- Highcharts: how to separate stacked columns on datetime axis
- Highcharts Pie Donut Customize shape
- Prevent strtotime being encoded as string by json_encode
- Highcharts all js in one package
- Creating ranking chart in Higcharts with bar range colors
- highcharter: how do I make a grouped plot using the hcaes function
- Highcharts: Add plotlines based on enabled series