Related
is it possible to have columns with data series going in the Y axis instead of X axis? I would also need to specify the colour for each data and generate a legend for all of them
This fiddle
https://jsfiddle.net/vyamk5cg/
get close but unfortunately the legend doesn't reflect the colour of each value
name: "'15",
data: [{
y: 2,
color: '#ff0000'
}, {
y: 3,
color: '#00ff00'
}, {
y: 1,
color: '#0000ff'
}]
You need to define each point as an outstanding series and attach them to the common stack.
Demo: https://jsfiddle.net/BlackLabel/0vnuo9m1/
series: [{
name: '`15',
stack: '15',
color: '#ff0000',
data: [{
y: 2,
}]
}, {
name: '`15',
stack: '15',
color: '#990000',
data: [{
y: 1,
}]
}, {
name: '`15',
stack: '15',
color: '#550000',
data: [{
y: 3,
}]
}, {
name: '`16',
stack: '16',
color: '#00ff00',
data: [{
y: 2,
}]
}, {
name: '`16',
stack: '16',
color: '#009900',
data: [{
y: 1,
}]
}, {
name: '`16',
stack: '16',
color: '#005500',
data: [{
y: 3,
}]
}]
API: https://api.highcharts.com/highcharts/series.line.stack
I use highcharts for a chart. I made series with "linkedTo" because I need to group the columns by region and generate a legend displaying these regions. Until then, the result is the desired one. But I can not display the name of my categories on the X axis. Under each column there should be "A", "B", ... As in the picture. See the jsfiddle for the code. Thank you for your help.
http://jsfiddle.net/yucca/hpkLy6t0/24/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'TEST'
},
subtitle: {
text: 'TEST'
},
xAxis: {
type: 'category',
categories: ['A', 'B', 'C', 'D']
},
legend: {
enabled: true,
labelFormatter: function() {
return this.userOptions.id
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
id:'China',
color: '#004f9e',
data: [1100]
},
{
id:'International',
color: '#e73357',
data: [10]
},
{
linkedTo: 'International',
color: '#e73357',
data: [1000]
},
{
linkedTo: 'China',
color: '#004f9e',
data: [686]
}
]
});
graph
You need to make a slight alteration to your series in order for this to work.
series: [{
data: [{
id:'China',
color: '#004f9e',
y: 1100
},{
id:'International',
color: '#e73357',
y: 10
},{
linkedTo: 'International',
color: '#e73357',
y: 1000
},{
linkedTo: 'China',
color: '#004f9e',
y: 686
}],
}]
What I did is the following:
I changed the data[] so it holds an array of your values.
I changed the values stored as data: [686] to y: 686
Here you can find a working JSFiddle
I create a scatter chart and will add a label on a box that has been specified, I've managed to make his label, but when her screen minimized, do not adjust the position of its labels.
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
and my complete code is
$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Pembenahan Dimensi Layanan'
},
subtitle: {
text: 'Source: rad-research.com'
},
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
xAxis: {
title: {
enabled: true,
text: 'Kepentingan'
},
min: -0.5,
max: 39.3,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 12.7,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 26,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 39.3,
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Kepuasan'
},
tickInterval: 8.9,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 46.2,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 55.2,
zIndex: 3
}]
},
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: 'Marketing',
data: [[8.75, 45.8]]
},{
name: 'Sales',
data: [[15.0, 43.6]]
},{
name: 'Aktivasi/Instalasi',
data: [[-0.3, 53.2]]
},{
name: 'Contact Center',
data: [[1, 52.2]]
},{
name: 'Customer Account',
data: [[-0.3, 60.1]]
},{
name: 'Field Support',
data: [[30.5, 40.3]]
},{
name: 'Billing',
data: [[37.5, 59.2]]
}]
});
Labels in this case are static, so unless you manually redraw them they will will not be responsive.
I prefer another way - you can use renderer and have control rendered objects completely. With the help axis.toPixels() method you can easily make them responsive and stays in the fixed value.
Create item on load event:
load: function () {
this.customTexts = [];
var text = this.renderer.text(
'Responsive text',
this.xAxis[0].toPixels(15),
this.yAxis[0].toPixels(50)
)
.css({
fontSize: '10px'
})
.add();
this.customTexts.push(text);
},
Redraw the item on redraw event:
redraw: function () {
this.customTexts[0].attr({
x: this.xAxis[0].toPixels(15),
y: this.yAxis[0].toPixels(50)
});
}
Example: http://jsfiddle.net/hfev4w7c/
I am using highstock and wants to add flags to my graphs.
I have two charts in the same container and are using "onSeries" to add
the flags on the correct chart. However, the flags are always applied to the upper graph eventhough I specify in the "onSeries" parameter in my flags config.
fiddler: https://jsfiddle.net/rick822/mtw0oxxy/
$(function () {
$('#container').highcharts('StockChart', {
chart: {
height: 1800
},
title : {
text : 'AAPL Stock Price'
},
yAxis: [
{
labels: {},
title: {
text: 'test1'
},
height: 100,
opposite: false,
offset: 0
},
{
labels: {},
title: {
text: 'test2'
},
height: 100,
top: 300,
opposite: false,
offset: 0
}
],
series : [{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test1',
tooltip: {
valueDecimals: 2
}
,
yAxis: 0
},
{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test2',
tooltip: {
valueDecimals: 2
},
yAxis: 1
},
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red'
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen'
}
]
});
});
As you have several y-axis you also have to specify the associated y-axis for the flag series, at least when they are not going to be on the index 0 y-axis.
For example (JSFiddle):
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red',
yAxis: 0
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen',
yAxis: 1
}
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},