I have an array of the following objects:
Now my goal is to create column chart that would look something like this:
And then the next object in my array.
I have been looking through the documentation and all I was able to find was something like this:
Highcharts demo
The problem is the data value that you set in the series. if you insert an array it will be split across all categories. As far as I can see you cannot lock one data series to one category.
What can I try next?
My attempt:
I'm attempting within this fiddle:
Highcharts.chart('container', {
xAxis: {
minPadding: 0.05,
maxPadding: 0.05,
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
series: [{
type: 'column',
name: 'Apples',
zoneAxis: 'x',
data: [
['First', 29.9],
['Second', 71.5],
['Third', 106.4]
]
},{
type: 'column',
name: 'oranges',
data:[
['A', 20]
]
}]
});
Fiddle
There are probably many ways to approach this, and the best option depends on how specific your needs are.
The first way that comes to mind, is to just manipulate how you structure your data and your categories.
Example:
xAxis: {
categories: ['Group 1', 'Group 2', 'Group 3'],
labels: { style: { fontWeight: 'bold' } }
},
series: [{
name: 'Subset A',
data: [{y: 10, name: '1A'}, {y: 5, name: '2A'}, {y: 7, name: '3A'}]
}, {
name: 'Subset B',
data: [{y: 5, name: '1B'}, {y: 3, name: '2B'}, {y: 4, name: '3B'}]
}]
So, assuming three groups, each with two points. You want the first category to show point A and B from Group 1, the second category to show point A and B from Group 2, etc.
Fiddle:
http://jsfiddle.net/jlbriggs/hLfajxz9/
Output:
The main potential downside to this is that the legend will show/hide points A or B, and not Group 1, 2, or 3.
You can work around this by adding a function to show/hide categories, if that's an issue.
Check out the answer on this question here:
How to show/hide categories with checkbox using highcharts?
And the related fiddle here:
http://jsfiddle.net/jlbriggs/wqwawuLq/
Related
I have a boxplot chart made with highcharts, and I have 2 series, one for the observations and one for the outliers. I want to hide one column in both of the series, but going through the API there doesn't seem to be a way to hide a data row, you can only remove one. Is there a way to do it with the API rather than having to hack my way around it?
Edit: Some examples on the structure:
series: [{
name: 'Observations',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]},
{
name: 'Outliers',
type: 'scatter',
data: [
[0, 2],
[1, 5]
]
}
]
This structure has 2 series, with the first series having the boxes of the boxplot, and the second having the outliers. In other graphs, like the column graph, you can add each column as a series, which gives me more options to manipulate them, but here I have each column as a data array object. In Highcharts you can hide series by triggering the hide() function on the series, but you can't hide data objects, you can only remove them. What I want to do is hide a single data array object from rendering in the view.
As a workaround I can technically remove the object I want from data array and save it somewhere else, until I need it, but what I'm wondering is whether there's a better way of doing that, maybe using plotPoints or any other way.
Here's also a demo from the highcharts website. The data here are an array, but anything in the data API above still work on them. Here's the series api for comparison.
You can borrow setVisible method from pointClass in pie series prototype:
var pieSetVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible,
point1 = chart.series[0].points[0],
point2 = chart.series[1].points[0];
pieSetVisible.call(point1);
pieSetVisible.call(point2);
Live demo: http://jsfiddle.net/BlackLabel/ahckoLn5/
I found a solution. There are apparently 2 alternative ways to setup a Boxplot chart using series (which you can hide and show using the legend or the hide() and show() methods):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}, {
type: 'scatter',
data: [[0, 1], [0,2]] // outlier points
}]},
{
name: 'Series 2',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
// no outliers here
}
]
Basically you can put Observations and Outliers in one series/column, by giving the outliers type: 'scatter' as shown above. The problem with this method is that you still can't hide the outliers for some reason by calling the hide() and show() methods.
The alternative way of doing this is putting each column observations and each outlier observations in a separate series, and giving both the same x value (the outliers should have the x of the box, in this example it's 0):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}]},
{
type: 'scatter',
name: 'Series 2: Outliers',
data: [[0, 1], [0,2]]
}
{
name: 'Series 3',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
}
]
To stack the observations and outliers over each other you have to disable grouping in the options:
plotOptions: {
series: {
grouping: false,
}
},
Hi there is it possible to show only one value per category in the column chart in highcharts? without nulling the other values? because my categories will be dynamic so in the series it is impossible to know which values will be null. For example.
var chart = {
type : 'column'
};
... code here
xAxis: {
categories: [
'Jan',
'Feb',
],
},
Now in my setup of the series I am nulling the other data so that it will only show one value like this
var series = [
{
name: 'January',
data: [71, null]
},
{
name: 'February',
data: [null, 83]
},
];
Now the problem arises if my categories are dynamic as I have said. Is it possible to use only one value without setting some data to null? Or am I using the wrong chart for this task (I need a vertical bar chart)? If so, what should I use?
There's a js fiddle that specifically does this.
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-objects/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
},
{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
I am trying to use highcharts.js' drilldown with nested series. To keep things simple, I am using the official demo provided by highcharts.js:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/multi-series/
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
I would like to modify this example to also compare election years in the drilldown. The official demo's drilldown only shows a single election year for each region (north, south, etc). I would like to have the same blue/black columns (election year) in the drilldown graphs.
My attempts of nesting series in drilldowns are found here:
http://jsfiddle.net/draptik/bnvbsLd1/1/
drilldown: {
series: [{
id: 'republican-2010',
data: [{
series: [{
name: 'republican',
data: [{
name: 'north',
y: 3
}, {
name: 'west',
y: 3
}, {
name: 'east',
y: 3
}, {
name: 'south',
y: 3
}]
}, {
name: 'democrat',
Basically I just tried to nest a series in the drilldown's series data array, but this does not work.
Thankful for any pointer.
I think you should remove series property inside drilldown's data.
It'll be like this:
drilldown: {
series: [
{
id: 'republican-2010',
data: [{
name: 'republican',
y: 10,
drilldown: 'repbulican'
}]
}, // end of first series
{
id: 'repbulican',
data: [
['north' , 3],
['west' , 3],
['east', 3],
['south', 3]
]
}
] // end of series array
} // end of drilldown object
I already made an example for 'republican-2010' series only to show you how to do it.
Just do the same for other series.
there is two things I'd like to do with this chart http://jsfiddle.net/4vyaaLjL/
$('#container').highcharts({
chart: {
type: 'area',
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
},
yAxis: {
title: {
text: 'Y-Axis'
},
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1, 0, 3, null, 3, 1, 2, 1]
}]
});
I'd like to style the 'null' data point with dashes.
Have some styled dots in place of the squares in the image.
Thanks
There is an option connectNulls, but you can not style with a different dash-style. So how about using series.zones? Unfortunately, you need to calculate in advance, where should be zones according to the null data-points. Another solution for this is to simple create separate series with just two points and line between them. You can connect two series using series.linkedTo option.
See this question.
And demo with 4.2.x version: http://jsfiddle.net/Yrygy/504/
i have chart like this image
this chart created with pie,spline and column.column display correct value y-axis and pie display precent of y-axis and need each peice of pie that relate to column have a same color.im traying to use color array in highchart but it dosent work.
Set colors where number of elements will be equal number of categories. For example: http://jsfiddle.net/3EkbA/2/
$('#container').highcharts({
colors: [ 'red', 'green', 'blue', 'yellow', 'black' ],
series: [{
type: 'column',
name: 'Jane',
colorByPoint: 'true',
data: [3, 2, 1, 3, 4]
},{
type: 'pie',
data: [14, 15, 16, 17,14],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
Without seing your code for the cart, it's hard to say the best way to sort this out. However, one option is to specify the colour of each point in the series (http://api.highcharts.com/highcharts#series.data)
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
This way you have absolute comtrol over the colour of every point in each series.