I'm wondering is it possible to add titles as shown in the image below in the red square. Any demo will be appreciated!
Highcart with titles
I think that you should be able to achieve the wanted effect by using the below config with dummy series to render the second y-axis:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: [{
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: 'test',
style: {
"color": "#333333",
"fontSize": "18px"
}
}
}, {
offset: 150,
tickLength: 0,
lineWidth: 0,
categories: ['26-35', '16-25', '36-45', '46-55', '56-65', '66-75', '75+'],
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: 'test',
style: {
"color": "#333333",
"fontSize": "18px"
}
},
}],
series: [{
// dummy series
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133],
xAxis: 1,
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
}, {
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133],
name: 'main series'
}]
});
Demo: https://jsfiddle.net/BlackLabel/3qu4Lv19/
API to used features:
https://api.highcharts.com/highcharts/xAxis.title.style
https://api.highcharts.com/highcharts/xAxis.offset
https://api.highcharts.com/highcharts/xAxis.categories
https://api.highcharts.com/highcharts/series.column.enableMouseTracking
Related
I have used the customevents to make the labels on the x-axis clickable. And If you click it (for example, click "[Sale]") there will be an alert.
Check this: http://jsfiddle.net/dq8wbdeu/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter:function(){return '['+this.value+']'},
events:{
click:function(){alert(this)}
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
I hope the lable "[Sale]" to become red after clicking, is that possible? How can I achieve that? I tried this.style.color='red' but failed. And since "this" in the function block is a bit weird, I don't know what should I do now.
Thanks!
This question already has an answer here:
Highcharts - Force Categories in x-axis to be shown, even without data
(1 answer)
Closed 6 years ago.
I have following jsFiddle
http://jsfiddle.net/9v636zt3/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
Using highcharts, I want to show the x-axis labels 0.0001,0.001,0.01,0.1,1,10,100 in series. but does not show it some how.
How can I force to show all the x-axis values?
Please help.
I think you are missing something i was able to plot your chat with the data you supply using this code below.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100],
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5,0,0,0]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
I am using highcharts for visualization . I am trying to plot similar kind of chart. I have tried it using multiple y axis and finally ended up with
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
yAxis: 0,
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
yAxis: 1,
type: 'column',
name: 'Boston',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 1,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 1,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 1,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
well, solution is to add id and colour to every series item (you can also define global colours instead):
id: "series0",
color: "red",
Then for the second axis series items you need to add linkedTo: <id> parameters. See how it works (colours specified only to 0 and 4th elements just to show that it works):
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
id: "series0",
color: "red",
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series1",
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
id: "series2",
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
id: "series3",
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
id: "series4",
linkedTo: "series0",
color: "red",
yAxis: 1,
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series5",
linkedTo: "series1",
yAxis: 1,
type: 'column',
data: [1000, 6000, 3000, 2000]
}, {
id: "series6",
linkedTo: "series2",
yAxis: 1,
type: 'column',
data: [3000, 7000, 2000, 8000]
}, {
id: "series7",
linkedTo: "series3",
yAxis: 1,
type: 'column',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});
You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/