We Keep Coding

How to position dataLabels at the midpoint of an arearange chart in highcharts?

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance

You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter

Highcharts Circular Percentage Chart

I am using Highcharts, and I am wondering if it is possible for highcharts to make circular charts like these:
I have this, but it fills the whole circle instead of just 60% of the circle (Here is the fiddle: http://jsfiddle.net/fccuw47y/1/).
$(function() {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
shadow: false
}
},
series: [{
name: 'Browsers',
data: [["Total",60]],
size: '100%',
innerSize: '95%',
showInLegend:false,
dataLabels: {
enabled: false
}
}]
});
});

We just implemented a similar looking chart using the solidgauge type in Highcharts.
You could use the piechart, but a pie chart is always going to fill 100%. It's the nature of the beast. If you wanted to use a piechart, you would have to supply it the amount for the remainder (empty space). For example, your series.data would have to be
[["Total", 60], ["Empty", 40]]
Here is an example using the solidgauge type of chart. It's much more flexible, and seems to be the more natural pick in this case.
http://jsfiddle.net/morqp9at/

You can set the color of a series data point to be transparent:
$(function() {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
shadow: false
}
},
series: [{
name: 'Browsers',
data: [
[ "Completed", 60],
{
"name": "Incomplete",
"y": 40,
"color": 'rgba(0,0,0,0)'
}
],
size: '100%',
innerSize: '95%',
showInLegend:false,
dataLabels: {
enabled: false
}
}]
});
});
That gives a "complete" circle with the "Completed" portion filled in.

Highcharts - How to get horizontal error bars?

I am using Highcharts to chart server performance stats, memory, cpu, etc. I want to add support incidents and change windows to these charts. At first I though the error bar was perfect, but I would need to rotate them to horizontal. As far as I can see, the chart can be rotated, but only the entire chart, not one series.
chart: {
type: 'spline',
inverted: true
},
Any ideas how I can get little horizontal bars on my chart, to represent the duration of incidents. Colouring according to severity wins bonus points.

use plotLines to darw lines on the chart
yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]
the same is possible for xAxis
if you want you can add them on demand using the method addPlotLine();
here is the example for plotLines http://jsfiddle.net/QWLhC/
chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});

You can use simple line series, where each error bar will be separate series, but all will be connected to one master series, see example: http://jsfiddle.net/3bQne/646/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
line: {
color: 'red',
lineWidth: 10,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
type: 'column',
name: 'some data',
data: [4, 11, 5, 16, 9, 22, 11, 1]
}, {
type: 'line',
name: 'errors',
id: 'err',
data: [ [0, 4],[3, 4]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [3, 1], [6, 1]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [2,10], [3,10]]
}]
});

chart.renderTo doesn't work

I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.
I have a function "createChart" like this:
createChart(questiontitle, answers);
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options); // Create new chart with general options
chart.renderTo(container);
for (var i = 0; i < answers.length; i++) {
categories.push(answers[i].Text);
}
console.log(categories);
chart.xAxis[0].setCategories(categories);
chart.setTitle({ text: 'eerzera' });
// redraw chart
chart.redraw();
}
I have a div like this:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
As you can see I have "chart.renderTo" but I always get the same error:
Highcharts Error #13
Rendering div not found
This error occurs if the chart.renderTo option is misconfugured so
that Highcharts is unable to find the HTML element to render the chart
in.
My variable options is like this:
var options = {
chart: {
type: 'bar'
},
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, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
}
How is this possible?

If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:
change
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options);
chart.renderTo(container);
to:
function createChart(questiontitle, answers){
chart = $('#container').highcharts(options);
or, if not using jQuery,
function createChart(questiontitle, answers){
options.chart.renderTo = 'container';
chart = new Highcharts.Chart(options);

In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the # if that element is an ID.
If you have this element <div id="graph-container"></div>
This fails:
renderTo: '#graph-container'
This works:
renderTo: 'graph-container'
Reference to the Highcharts docs

Something like this: chart.renderTo(container); doesn't exists in Highcharts.
To set renderTo use options:
var options = {
chart: {
type: 'bar',
renderTo: 'container'
},

You may be facing the same problem that i was.
Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:
<head>
<title>HighCharts :D</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
myChart.renderTo('container');
</script>
</body>

Customizing the colors of individual series in HighCharts

I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Chart Title'
},
subtitle: {
text: 'Chart subtitle'
},
xAxis: {
categories: [<%= GraphDate %>]
,
labels:
{
rotation: -45,
align: 'right',
style:
{
}
}
},
yAxis: {
min: 160,
title: {
text: 'Temp'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 0,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y + ' ºC';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
[<%= GraphSeries %>],
});
I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?
series: [{
color: 'yellow',
data: [
[<%= GraphSeries %>]
]},
Edit:
$(document).ready(function () {
chart = new Highcharts.Chart({
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
}

Top level config can contain colors field. It's an array from which series colors will be picked.
See here.
Here's working piece from my project
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart:{
renderTo:'perfchart',
type:'line',
marginRight:130,
marginBottom:25
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title:{
text:'Historical system performance',
x:-20 //center
},
Appearance:

See the code (and the plot that it renders) below.
The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.
Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
series: [{
name: 'series I',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
},
{
name: 'series II',
data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
}
]
});
});
})

The color can be configured as part of the series. Try something like this:
series: [
{
name: 'series I',
color: '#ffffff',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
}
];