Stockchart - property { cropThreshold: } is not working - highcharts
I have created a chart with StockChart and I am trying to enlarge the cropThreshold of the serie but without success.
When I am using the HighCharts implementation then it's working as expected.
example of StockChart / HighChart:
- JSFiddle
(To see the difference between the two implementation just change line 4 with line 5)
code:
$(function() {
Highcharts.stockChart('container', {
/* Highcharts.chart({ */
chart: {
renderTo: 'container'
},
title: {
text: 'Project wise Budget Estimation'
},
navigation: {
buttonOptions: {
enabled: false
}
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
tickInterval: 15 * 60 * 1000,
type: 'datetime',
min: 1530385200000,
max: 1530394200000
},
yAxis: {
min: 0,
opposite: false,
tickColor: '#95989A',
tickWidth: 1,
tickLength: 10,
visible: true,
tickInterval: 60,
title: {
text: 'Amount Distribution'
}
},
legend: {
shadow: false
},
tooltip: {
},
plotOptions: {
column: {
stacking: 'normal',
cropThreshold: 150
}
},
series: [
{
name: 'targetName',
showInLegend: true,
data: [
[1530385200000,500],[1530386100000,500],[1530387000000,500],[1530387900000,500],[1530388800000,500],[1530389700000,500],[1530390600000,400],[1530391500000,450],[1530392400000,550],[1530393300000,500],[1530394200000,650],[1530395100000,500],[1530396000000,500],[1530396900000,550],[1530397800000,500],[1530398700000,500],[1530399600000,700],[1530400500000,650],[1530401400000,800],[1530402300000,500],[1530403200000,500],[1530404100000,300],[1530405000000,250],[1530405900000,200],[1530406800000,350],[1530407700000,150],[1530408600000,770],[1530409500000,800],[1530410400000,500],[1530411300000,500],[1530412200000,500],[1530413100000,500],[1530414000000,500],[1530414900000,500],[1530415800000,500],[1530416700000,500],[1530417600000,500],[1530418500000,500],[1530419400000,500],[1530420300000,500],[1530421200000,500],[1530422100000,500],[1530423000000,500],[1530423900000,500],[1530424800000,500]
],
zIndex: 2
},
{
name: 'deviationName',
showInLegend: true,
data: [
[1530385200000,450,550],[1530386100000,450,550],[1530387000000,450,550],[1530387900000,450,550],[1530388800000,450,550],[1530389700000,450,550],[1530390600000,360,440],[1530391500000,405,495],[1530392400000,495,605],[1530393300000,450,550],[1530394200000,585,715],[1530395100000,450,550],[1530396000000,450,550],[1530396900000,495,605],[1530397800000,450,550],[1530398700000,450,550],[1530399600000,630,770],[1530400500000,585,715],[1530401400000,720,880],[1530402300000,450,550],[1530403200000,450,550],[1530404100000,270,330],[1530405000000,225,275],[1530405900000,180,220],[1530406800000,315,385],[1530407700000,135,165],[1530408600000,693,847],[1530409500000,720,880],[1530410400000,450,550],[1530411300000,450,550],[1530412200000,450,550],[1530413100000,450,550],[1530414000000,450,550],[1530414900000,450,550],[1530415800000,450,550],[1530416700000,450,550],[1530417600000,450,550],[1530418500000,450,550],[1530419400000,450,550],[1530420300000,450,550],[1530421200000,450,550],[1530422100000,450,550],[1530423000000,450,550],[1530423900000,450,550]
],
type: 'arearange',
linkedTo: ':previous',
zIndex: 0
},
{
name: 'periodsName',
showInLegend: false,
type: 'column',
cropThreshold: 150,
zIndex: 1,
pointInterval: 24 * 3600 * 1000,
data: [
{"x":1530385200000,"y":400,"colorIndex":55},{"x":1530386100000,"y":400,"colorIndex":55},{"x":1530387000000,"y":400,"colorIndex":55},{"x":1530387900000,"y":480,"colorIndex":56},{"x":1530388800000,"y":495,"colorIndex":56},{"x":1530389700000,"y":510,"colorIndex":56},{"x":1530390600000,"y":700,"colorIndex":57},{"x":1530391500000,"y":650,"colorIndex":57},{"x":1530392400000,"y":300,"colorIndex":55},{"x":1530393300000,"y":660,"colorIndex":57},{"x":1530394200000,"y":400,"colorIndex":55},{"x":1530395100000,"y":500,"colorIndex":56},{"x":1530396000000,"y":500,"colorIndex":56},{"x":1530396900000,"y":200,"colorIndex":55},{"x":1530397800000,"y":490,"colorIndex":56},{"x":1530398700000,"y":500,"colorIndex":56},{"x":1530399600000,"y":400,"colorIndex":55},{"x":1530400500000,"y":300,"colorIndex":55},{"x":1530401400000,"y":200,"colorIndex":55},{"x":1530402300000,"y":500,"colorIndex":56},{"x":1530403200000,"y":480,"colorIndex":56},{"x":1530404100000,"y":670,"colorIndex":57},{"x":1530405000000,"y":755,"colorIndex":57},{"x":1530405900000,"y":680,"colorIndex":57},{"x":1530406800000,"y":710,"colorIndex":57},{"x":1530407700000,"y":670,"colorIndex":57},{"x":1530408600000,"y":400,"colorIndex":55},{"x":1530409500000,"y":400,"colorIndex":55},{"x":1530410400000,"y":500,"colorIndex":56},{"x":1530411300000,"y":400,"colorIndex":55},{"x":1530412200000,"y":510,"colorIndex":56},{"x":1530413100000,"y":400,"colorIndex":55},{"x":1530414000000,"y":490,"colorIndex":56},{"x":1530414900000,"y":400,"colorIndex":55},{"x":1530415800000,"y":400,"colorIndex":55},{"x":1530416700000,"y":590,"colorIndex":57},{"x":1530417600000,"y":590,"colorIndex":57},{"x":1530418500000,"y":600,"colorIndex":57},{"x":1530419400000,"y":620,"colorIndex":57},{"x":1530420300000,"y":400,"colorIndex":55},{"x":1530421200000,"y":600,"colorIndex":57},{"x":1530422100000,"y":600,"colorIndex":57},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55}
]
},
{
name: 'withinTarget',
type: 'column',
showInLegend: true,
data: []
},
{
name: 'belowTarget',
type: 'column',
showInLegend: true,
data: []
},
{
name: 'overTarget',
type: 'column',
showInLegend: true,
data: []
}],
scrollbar: {
enabled:true,
/* liveRedraw: false, */
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
}
});
});
This behavior is caused by dataGrouping, you can disable it. It is also worth noting that you have unsorted data.
plotOptions: {
series: {
stacking: 'normal',
cropThreshold: 150,
dataGrouping: {
enabled: false
}
}
}
Live example: http://jsfiddle.net/BlackLabel/2ma3yhv1/
API Reference: https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled
Related
Combined Chart Highcharts Pie plus Bar grouppadding and pointapadding issue
I am trying to have combined chart to display bar charts below my 2 pie series .
I am trying to push the 3 bars below "Chart Title" and I am not being to achieve this with different parameters like grouppadding in highcharts . First I need to reduce the space between Bars to make it 10 px may be and then need to push the entire bar series after Semidonut Pie .
Anyway to achieve this ...
This is roughly the coding I have :
<HighchartWrapper
chartOptions={{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotBackgroundColor: null,
plotShadow: false,
height: 400,
width: 650,
},
tooltip: {
formatter: function () {
console.log('In tooltip:', this);
if (this.key === 'yoyfnbrev')
var txt1 = 'YOY Func Rev' + this.y;
return txt1;
},
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '85%'],
size: '160%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: '16px',
color: 'black',
style: {
fontFamily: "'Lato', sans-serif",
},
},
formatter: function () {
if (this.series.name === 'revthisyear')
return (
this.point.y.toFixed(0) + '%'
);
else if (this.series.name === 'revlastyear')
return this.point.y.toFixed(0) + '%';
},
},
},
},
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
},
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
opposite: true,
title: {
text: null,
},
labels: {
enabled: false,
},
},
series: [
{
type: 'pie',
name: 'revlastyear',
innerSize: '40%',
data: [20,40,40],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: true,
distance: -140,
},
},
{
type: 'pie',
name: 'revthisyear',
innerSize: '60%',
data: [[10, 70, 20],
colors: ['#1a7ead', '#e95326', '#008540'],
dataLabels: {
enabled: true,
// inside: false,
distance: -60,
},
},
{
type: 'bar',
name: 'yoyrev',
// innerSize: '10%',
data: [20, -100, -50],
colors: ['#1a7ead', '#e95326', '#008540'],
pointWidth: 10,
pointPadding: 0,
groupPadding: 0.3,
},
],
}}
/>
I think that a good solution will be to use independent yAxis and xAxis for this bar, set a smaller height for them and change the pie centre values. See:
xAxis: [{
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
title: {
text: null,
},
labels: {
enabled: false,
},
}, {
height: '20%'
}],
Demo: https://jsfiddle.net/BlackLabel/jc3fLvt1/1/
API: https://api.highcharts.com/highcharts/series.pie.center
API: https://api.highcharts.com/highcharts/series.bar.yAxis
The simplest solution is to create another chart:
Highcharts.chart('container', {
...,
series: [{
type: 'pie',
...
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'bar',
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/r9yz6qdk/
Highcharts map chart not drawing bubble on calling setData
This my map configuration
chart = Highcharts.mapChart('container', {
title: {
text: ''
},
//This enables the zooming functionality
mapNavigation: {
enabled: true
},
credits: {
enabled: false
},
tooltip: {
pointFormat:
'Server Name : {point.source_host}<br>' +
'{point.Hover}<br>' +
'{point.trueVUEStatus}'
},
xAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
yAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
plotOptions: {
series: {
//allowPointSelect: true,
point: {
events: {
click: function (event) {
//location.href = '?' + event.point.serverName + '#serverdetailsview';
//alert('clicked '+ event.point.source_host);
window.open('index.html?' + event.point.source_host + "#serverdetailsview&store-no=" + event.point.storeNum, '_blank');
//http://localhost:10080/dashboard/index.html?ME629ASRFI21#serverdetailsview
}
}
}
}
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false,
showInLegend: false
}, {
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities1',
data: normaljson,
minsize: '1%',
maxSize: '4%',
color: '#00a65a'
},{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities2',
data: warnjson,
minsize: '1%',
maxSize: '4%',
color: '#f39c12'
},
{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities3',
data: errorjson,
minsize: '1%',
maxSize: '4%',
color: '#dd4b39'
}]
});
Just after this I am calling setData()
However, the bubble is not drawn on map
var pt = {"source_host":"xcxxxx","lat":26.3685,"lon":-80.1344,"serverIP":"NA","store":"Bloomingdales","storeNum":"2","status":"green"};
chart.series[2].setData([pt]);
It seems that you didn't include z property (value of the bubble) in your point's JSON (https://api.highcharts.com/highmaps/series.mapbubble.data.z). Bubble is rendering fine after I added it: http://jsfiddle.net/BlackLabel/ktha1nmz/
Highcharts bar chart configuration to increase height and round edges
In an Angular 4 project I am using the angular2-highcharts library to create a stacked bar chart. The following object is the configuration I have so far.
{
title: { text: '' },
xAxis: {
categories: [''],
crosshair: true,
visible: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: true
},
visible: false
},
chart: {
type: 'bar',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
return this.point.y + '%';
},
inside: true
},
enableMouseTracking: false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.y) {
return this.point.y + '%';
}
return '';
},
style: { fontSize: '10px' },
padding: 10
},
borderWidth: 0
}
},
series: [{
name: 'Pending',
data: ...,
color: '#ff4233'
}, {
name: 'Executed',
data: ...,
color: '#34d788'
}, {
name: 'Cancelled',
data: ...,
color: '#8f8c87'
}]
}
and this produces this visual result ->
I need to transform this into ->
As you see in the desired result the chart has more height and also its edges are round. That I don't know how to do.
Have you tried to use rounded-corners plugin? With it you can use following properties: borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomRight and borderRadiusBottomLeft Plugin Reference: https://github.com/highcharts/rounded-corners Example: http://jsfiddle.net/3Lhzx8ao/
Link multiple axis in highcharts
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>
Reduce gap between series data in Bar Highchart
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/