I have this advanced format:
series:[{
name: 'X',
type: 'column',
color: '#F4811F'
},{
name: 'Y',
type: 'column',
color: '#8EB950'
},{
name: 'Z',
type: 'column',
color: '#5C97D3'
}, {
name: 'AvgX',
type: 'line',
lineWidth: 4,
color: '#F4811F'
}, {
name: 'AvgY',
type: 'line',
lineWidth: 4,
color: '#8EB950'
}, {
name: 'AvgZ',
type: 'line',
lineWidth: 4,
color: '#5C97D3'
}]
The displayed chart is like this
How can I move AvgX to be on X and AvgZ to be on Z? Is there any option in Highchart to do that?
You can set right pointPlacement property for line series:
series: [{
name: 'X',
type: 'column',
color: '#F4811F',
data: [1, 1, 1]
}, {
name: 'Y',
type: 'column',
color: '#8EB950',
data: [1, 1, 1]
}, {
name: 'Z',
type: 'column',
color: '#5C97D3',
data: [1, 1, 1]
}, {
name: 'AvgX',
type: 'line',
lineWidth: 4,
pointPlacement: -0.2,
color: '#F4811F',
data: [2, 2, 2]
}, {
name: 'AvgY',
type: 'line',
lineWidth: 4,
color: '#8EB950',
data: [3, 3, 3]
}, {
name: 'AvgZ',
type: 'line',
lineWidth: 4,
pointPlacement: 0.2,
color: '#5C97D3',
data: [4, 4, 4]
}]
Live demo: http://jsfiddle.net/BlackLabel/m4y0xepo/
API: https://api.highcharts.com/highcharts/series.line.pointPlacement
Related
i like to change the color of the bars in a stacked bar chart in highchart. I did not found the option where i can set the color foreach value. Joe should be red, Jane yellow, and John black.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You can add the field color in your serie like:
series: [{
name: 'John',
color: '#ff8080',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
color: '#ffff00',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
color: '#000000',
data: [3, 4, 4, 2, 5]
}]
I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations
I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
I am using Highcharts and would like to combine 2 types of chart.
I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.
I can't find any example of doing this so I don't even know if this is possible.
I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.
If what I'm trying to do possible?
Column with negative values
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Bar with negative stack
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
Thanks to #Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
colors: Highcharts.getOptions().colors.splice(0, 3),
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: true
}
},
series: [{
stack: 'john',
name: 'John',
data: [5, 3, 14, 7, 2]
}, {
stack: 'jane',
name: 'Jane',
data: [2, 12, 3, 2, 1]
}, {
stack: 'joe',
name: 'Joe',
data: [3, 4, 4, 2, 5]
}, {
showInLegend: false,
stack: 'john',
name: 'John',
data: [-5, -3, -4, -7, -2]
}, {
showInLegend: false,
stack: 'jane',
name: 'Jane',
data: [-2, -2, -3, -2, -1]
}, {
showInLegend: false,
stack: 'joe',
name: 'Joe',
data: [-3, -4, -4, -2, -5]
}]
});
I'm wondering if somebody has tried to add drilldowns to a column range chart.
This is an example of what I'm trying to do: http://jsfiddle.net/pawelk79/8jmV6/
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'History'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Example 1','Example 2', 'Example 3'],
},
yAxis: {
type: 'datetime',
min: new Date('2007,01,01').getTime(),
max: new Date('2014,05,01').getTime(),
title: {
text: 'Year'
}
},
tooltip: true,
plotOptions: {
columnrange: {
dataLabels: {
enabled: false,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled:false
},
series: [{
name: 'Year',
data:
[
[Date.UTC(2007, 2, 2), Date.UTC(2009, 5, 10)],
[Date.UTC(2009, 6, 10), Date.UTC(2011, 9, 10)],
[Date.UTC(2011, 9, 25), Date.UTC(2014, 5, 1)]
]
}
]
});
});
Any advises welcome.
Thanks
P
This does actually work, you just need to be particularly careful about the formatting of both the main series and drilldown series:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime'
},
legend: {
enabled: false
},
series: [{
name: 'Yearly',
colorByPoint: true,
data: [{
name: 'Yearly1',
low: Date.UTC(2007, 2, 2),
high: Date.UTC(2009, 5, 10),
drilldown: 'monthly1'
}, {
name: 'Yearly2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2011, 9, 10),
drilldown: 'monthly2'
}, {
name: 'Yearly3',
low: Date.UTC(2011, 9, 25),
high: Date.UTC(2014, 5, 1),
drilldown: 'monthly3'
}]
}],
drilldown: {
series: [{
id: 'monthly1',
data: [{
name: 'example1',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 15)
}]
}, {
id: 'monthly2',
data: [{
name: 'example1',
low: Date.UTC(2010, 5, 10),
high: Date.UTC(2010, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2010, 8, 10),
high: Date.UTC(2010, 8, 15)
}]
}, {
id: 'monthly3',
data: [{
name: 'example1',
low: Date.UTC(2012, 9, 10),
high: Date.UTC(2012, 9, 11)
}, {
name: 'example2',
low: Date.UTC(2012, 11, 10),
high: Date.UTC(2012, 11, 15)
}]
}]
}
});
Here is a working fiddle:
http://jsfiddle.net/ycn75svr
Formatting the dataLabels further would make sense (make the dates readable and return the actual series/drilldown names propwerly) but I haven't included that in this fiddle.