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
Related
I use Highchart with areaspline type and my problem is the area is got be blacked or gray based on fillOpacity in plotOptionsp property. I use this in different syntax type but the result is same.
For example :
plotOptions: {
area: {
fillOpacity: 0.5,
},
}
or :
plotOptions: {
series: {
fillOpacity: 0.5,
},
}
You can see the screenshot of result:
And here is my code:
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: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
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: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
What should I do to resolve this problem?
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I'm trying to plot a chart using highcharts that looks like this. Could somebody please provide a simple example.
I've tried this:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [[3, 4], [3, 5], [4, 2], [3, 2]]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [[4, 3], [5, 3], [2, 4], [2, 3]]
}]
});
});
http://jsfiddle.net/u6gbd6bx/3/
However, I'm struggling to get the grid and labels on the Y axis.
To get the categories on the Y axis, you need to specify the categories in the axis properties:
http://api.highcharts.com/highcharts#yAxis.categories
To get the grid, you can specify a width and a color for the gridlines for each axis:
http://api.highcharts.com/highcharts#yAxis.gridLineColor
http://api.highcharts.com/highcharts#yAxis.gridLineWidth
Note that grid lines on a chart are very often a distraction from the data - make them subtle if they are truly necessary.
To line the grid lines up with the categories, you can use the tickmarkPlacement property:
http://api.highcharts.com/highcharts#yAxis.tickmarkPlacement
And lastly, to get your data to line up correctly with your categories, you need to provide the category array index as the y value.
So, if your first category is "Support", you provide an x value of 0 for any data point in the Support category, etc.
Note also, that by default y axis categories run from bottom to top - if you want them to run from top to bottom, you can set reversed: true on your y axis.
Example:
http://jsfiddle.net/jlbriggs/6a5jdvyy/
Check the following example: http://jsfiddle.net/mushigh/qr815f25/2/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
gridLineWidth: 2,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
},
categories: ['', 'Support', 'Compliance', 'Risk', 'Fast', 'Easy to Get Started'],
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
y: 15
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [
[3, 4],
[3, 5],
[4, 2],
[3, 2]
]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [
[4, 3],
[5, 3],
[2, 4],
[2, 3]
]
}]
});
});
I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(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: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
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: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});
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/