I have a series which contain various data columns, each represented as columns in a gantt chart. There are many columns represented by 5 different colors that I would like to show up on the a legend.
legendItems = [ {name: "type1", color1: "#0082c8"},
{name: "type2", color1: "#f58231"},
{name: "type3", color1: "#911eb4"},
{name: "type4", color1: "#911eb4"},
{name: "type5", color1: "#911eb4"}
]
Is it possible to create a legend with the 5 colors and what they represent based on legendItems, without having to depend on the number of series?
If it is possible, how can I do this?
You can create custom legend buttons, like in this example: http://jsfiddle.net/BlackLabel/pvhud6zb/
Also Highcharts provide linkedTo option for series, which allow you to combine more than one series in one legend item:
Highcharts.chart('container', {
series: [{
data: [2,2,2]
},{
data: [1,2,3],
id: 'secondSeries'
},{
data: [3,2,1],
linkedTo: 'secondSeries'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/pfraLzgs/
API: https://api.highcharts.com/highcharts/series.line.linkedTo
Related
I'm trying to display two splines (xAsis: Date, yAxis: Number) in one plot for comparision. Problem here that x axis values is totaly different from spline to spline. I need to stack them somehow. I tried to use different x axis, but splines draws one after another. Is there a way to do this using Highstock or Highcharts API?
Here is screenshot of plot with two axis
You need to use separate xAxis for the series:
xAxis: [{
type: 'datetime'
}, {
type: 'datetime'
}],
series: [{
type: 'spline',
data: [...]
}, {
xAxis: 1,
type: 'spline',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/ch9Lu56s/
API Reference: https://api.highcharts.com/highcharts/series.spline.xAxis
Picture
Hi, I´ve come accross this picture. I am using highcharts.com and already have a boxplot rendered, and I would like to add 3 additional lines with some text for each individual boxplot. Later I wanna render gridlines so it will look like a table, I have drawn my idea very quickly in paint, how it should look in the end. Any ideas how to achieve that with highcharts? Thanks
Picture with gridlines
To acheive the wanted result, you can use grouped-categories module: https://github.com/blacklabel/grouped_categories
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/aest25yg/
I'm trying to graphic some values, I have this part, then I want to add some max and min line, I could do this creating another series and adding the min/max value that I want, the problem here is that my value series is an array of n elements so I want to know if I could create the min/max series for example just doing data: [2] and put the line in all the width of my chart. Something like this:
If there is no way to do this, just if is possible doing: data[2, 2, 2,.... n] is possible to show only the first and the last point and hide the rest of them?
Here is my working code
You can use plotLines for this.
Example:
yAxis: {
softMax: max,
min: 0,
plotLines: [{
value: min,
width: 1,
color: 'rgba(204,0,0,0.75)'
},{
value: max,
width: 1,
color: 'rgba(204,0,0,0.75)'
}]
}
Updated pen:
http://codepen.io/jlbriggs/pen/LbJQEV
Alternatively, if you really want it to be a series, you can grab the min and max x values, and provide your data as arrays of [x,y] pairs. Something like:
series: [{
name: 'Actual Series'
...
},{
name: 'Max',
data: [[xMin,yMax],[xMax,yMax]]
},{
name: 'Min',
data: [[xMin,yMin],[xMax,yMin]]
}]
read the comment in jsfiddle.
The space should not be there in rendered graph between blue one and green one in c1
http://www.jsfiddle.net/QnU9e/1/
In bar graph making 2 category and 3 series
series: [{
name: 'A',
data: [49.5, 71.5]
}, {
name: 'B',
data: [null, 78.8] // The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [30, 78.8]
}]
The only way I can find to do this is to control the bar spacing yourself by specifying X data values. Note, I set the pointPadding: 0 in the plotOptions so I could get total control.
series: [{
name: 'A',
data: [[0.075,49.5], [1,71.5]]
}, {
name: 'B',
data: [[0,null], [1.025,78.8]]// The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [[-0.075,30], [1.05,78.8]]
}]
Update fiddle.
Uforutnatley this options is not supported, but you can try to manipulate columns by translate() function which allows ot move SVG elements.
I'm trying to use highcharts to draw column chart with the following data:
- I have three categories: apples, oranges, peaches
- I have three data series for it: [1, 10, 100], [2, 9, 120], [1, 11, 150]
As you can see y values for different categories have completely different scales and I would like to show them accordingly. I'd like to show three groups of three columns, like this:
1, 2, 1 --- 10, 9, 11 --- 100, 120, 150
But also make sure first group is not completely squeezed into the ground because of the lower values.
Is it possible with highcharts?
You may want to take a look at the dual-axis chart example. Basically, you just need to make sure that you define your data in separate series, with different y-axes.
var chart = new Highcharts.Chart({
//...
yAxis: [
//your yAxis definitions
],
series: [{
name: "Apples",
yAxis: 0, //the index of the yAxis definition you want to use
data: [1,2,1]
}, {
name: "Oranges",
data: [10,9,11]
}, {
name: "Peaches",
data: [100,120,150]
}]
})