highcharts grouping with overflow - javascript

I made highcharts for petrol tank(credit prepayment)
I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)
Thanks.
![var options = {
chart: {
type: 'bar',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: \['Credit'\],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: \[{
color:'#89C35C',
name: 'Current Credit',
data: \[10\] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: \[5\] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: \[1\] }\],
};
$('#container').highcharts(options);][1]
Example:
http://jsfiddle.net/2se5q/

you will find all the explanations on this link http://api.highcharts.com/highcharts
To answer your question if you delete only "plotOptions:" You will not find more than the sum of the graphics on a line but starting from 0.
Here : http://jsfiddle.net/2se5q/3/
plotOptions: {
series: {
stacking: 'normal'
}

I made it like this,where type = area
http://jsfiddle.net/2se5q/4/
var options = {
chart: {
type: 'area',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: ['Credit'],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
color:'#89C35C',
name: 'Current Credit',
data: [10,10] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: [5,5] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: [1,1] }],
};
$('#container').highcharts(options);

Related

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image
The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

How can I place chart directly above the legend? (highcharts)

Here is what I achieved so far
http://jsfiddle.net/9r6Lr5gr/3/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});
I want to place the bar chart directly above the legend. Also, is it possible the little horizontal line just before the bar chart. Thanks.
Go through comment in code
Fiddle Demo
Highcharts.chart('container', {
chart: {
type: 'bar',
marginBottom: -180, //make charts display at bottom
events: {
load: function () {
// Draw the horizontal line
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0];
ren.path(line)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(10, 335)
.add();
}
}
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

How to configure Highcharts so that it displays some pre-defined value

I have been searching and struggling to find a solution for my problem for a long time but no luck.
I have a simple screen where i ask user to enter their score. Once they enter their score my graph shows up with my pre-defined average score and highest score. In this case, my average score is 1450 and the highest score is 1900.
What i want to do is that once my page is loaded i want my graph displays the average and highest score already. Once user enter his score then it shows up.
Below is my code and you can see it here: http://jsfiddle.net/8jomr1wd/
Any idea?
$(function () {
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}],
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
})
});
$(document).ready(function () {
$(function () {
create(0)
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
create(val1);
});
});
});
function create(val1){
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}]
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
}

Combine Highcharts and Intro.JS (or similar)

I have a lot of charts in Highcharts. Now I want to point out some interesting developments in some of these charts. This can be done with Intro.JS, for example.
How can I implement this library or something similar inside my Highcharts? An example of a Highcharts chart here.
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 20
},
title: {
text: 'Kortetermijnraming CPB'
},
subtitle: {
text: 'Werkloosheid stijgt tot 6%'
},
xAxis: {
max: Date.UTC(2000,1,0),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 0,
title: {
text: 'Werkloosheid (%)'
},
plotLines: [{
value: 0,
width: 2,
color: '#000000',
zIndex: 5
}, {
label: {
text: 'Werkloosheid',
x: 0,
align: 'right'
},
value: 6,
width: 0.5,
color: '#ffffff',
zIndex: 1
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'<br/>'+
Highcharts.dateFormat('%Y', this.x) +':</b> '+ this.y +'%';
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
legend: {
enabled: false
});
});

Categories