Highchart drilldown and drillup 2 times, column will cut off - highcharts
I got problem with when drilldown and drillup 2 times, column will cut off.
$(function() {
var series = [{
"color": "#4D94FF",
"data": [{
"y": 16900.6037097732,
drilldown: true
}, {
"y": 16598.1127253779,
drilldown: true
}, {
"y": 16258.989480705406,
drilldown: true
}, {
"y": 16248.5235795968,
drilldown: true
}, {
"y": 16193.565467835093,
drilldown: true
}, {
"y": 16024.382188677004,
drilldown: true
}, {
"y": 15939.296911716798,
drilldown: true
}, {
"y": 15878.156538128704,
drilldown: true
}, {
"y": 15859.042314678803,
drilldown: true
}, {
"y": 15849.380712985894,
drilldown: true
}, {
"y": 15631.992957442704,
drilldown: true
}, {
"y": 15231.375360610198,
drilldown: true
}, {
"y": 15177.678970454403,
drilldown: true
}, {
"y": 15138.9262791871,
drilldown: true
}, {
"y": 14907.178343607397,
drilldown: true
}, {
"y": 14712.1957852833,
drilldown: true
}, {
"y": 14604.5089572668,
drilldown: true
}, {
"y": 14566.970745146,
drilldown: true
}, {
"y": 14293.398250609893,
drilldown: true
}, {
"y": 14152.719995200001,
drilldown: true
}, {
"y": 14134.626426503697,
drilldown: true
}, {
"y": 13932.180859923708,
drilldown: true
}, {
"y": 13790.796702384303,
drilldown: true
}, {
"y": 13695.544447660202,
drilldown: true
}, {
"y": 13592.867697953701,
drilldown: true
}, {
"y": 13438.378718139,
drilldown: true
}, {
"y": 13188.681403070605,
drilldown: true
}, {
"y": 13109.667549848804,
drilldown: true
}, {
"y": 13059.584681272194,
drilldown: true
}, {
"y": 13000.372347950506,
drilldown: true
}, {
"y": 12813.297465918698,
drilldown: true
}, {
"y": 12532.475437284096,
drilldown: true
}, {
"y": 12515.3238663081,
drilldown: true
}, {
"y": 12462.217596782904,
drilldown: true
}, {
"y": 12193.2304492299,
drilldown: true
}, {
"y": 11967.110670820603,
drilldown: true
}, {
"y": 11766.267797112201,
drilldown: true
}, {
"y": 11688.796452044002,
drilldown: true
}, {
"y": 11676.0905818916,
drilldown: true
}, {
"y": 11542.720954126396,
drilldown: true
}, {
"y": 11524.478820919496,
drilldown: true
}, {
"y": 11176.910431652994,
drilldown: true
}, {
"y": 11148.9910212459,
drilldown: true
}, {
"y": 11147.984512210307,
drilldown: true
}, {
"y": 11036.183924155506,
drilldown: true
}, {
"y": 11028.906307756699,
drilldown: true
}, {
"y": 10924.515023171602,
drilldown: true
}, {
"y": 10870.417462228703,
drilldown: true
}, {
"y": 10794.527314604702,
drilldown: true
}, {
"y": 10711.816713451695,
drilldown: true
}, {
"y": 10647.2742567055,
drilldown: true
}, {
"y": 10245.294984622598,
drilldown: true
}, {
"y": 10159.2771334649,
drilldown: true
}, {
"y": 9746.344335019592,
drilldown: true
}, {
"y": 9588.249892114301,
drilldown: true
}, {
"y": 9457.898081183495,
drilldown: true
}, {
"y": 9439.750602872802,
drilldown: true
}, {
"y": 9419.698462570595,
drilldown: true
}, {
"y": 9384.5649919506,
drilldown: true
}, {
"y": 9349.794785022399,
drilldown: true
}, {
"y": 9345.9970427974,
drilldown: true
}, {
"y": 9333.461412205797,
drilldown: true
}, {
"y": 9025.358668211804,
drilldown: true
}, {
"y": 8971.495120078502,
drilldown: true
}, {
"y": 8848.795317591103,
drilldown: true
}, {
"y": 8800.908385901705,
drilldown: true
}, {
"y": 8737.5662531284,
drilldown: true
}, {
"y": 8678.7351885136,
drilldown: true
}, {
"y": 8456.7764961048,
drilldown: true
}, {
"y": 8311.562995553999,
drilldown: true
}, {
"y": 8089.600704193201,
drilldown: true
}, {
"y": 7932.7021273966,
drilldown: true
}, {
"y": 7804.2916799635,
drilldown: true
}, {
"y": 7665.482617346795,
drilldown: true
}, {
"y": 7545.366637899508,
drilldown: true
}, {
"y": 7523.392442792501,
drilldown: true
}, {
"y": 7422.4791104775,
drilldown: true
}, {
"y": 7277.150820999399,
drilldown: true
}, {
"y": 6813.364086545702,
drilldown: true
}, {
"y": 6810.916735649401,
drilldown: true
}, {
"y": 6497.3502318857,
drilldown: true
}, {
"y": 6456.528889776102,
drilldown: true
}, {
"y": 5989.065391362199,
drilldown: true
}, {
"y": 5930.785978138099,
drilldown: true
}, {
"y": 5550.153407216101,
drilldown: true
}, {
"y": 5363.220678388802,
drilldown: true
}, {
"y": 5231.219058841301,
drilldown: true
}, {
"y": 5090.3239122032,
drilldown: true
}, {
"y": 4838.792917356903,
drilldown: true
}, {
"y": 4831.680135994997,
drilldown: true
}, {
"y": 4811.924926727499,
drilldown: true
}, {
"y": 4658.4734687807,
drilldown: true
}, {
"y": 3072.9029491395,
drilldown: true
}, {
"y": 3045.4683175089,
drilldown: true
}, {
"y": 2923.221351564,
drilldown: true
}, {
"y": 2627.7834042233994,
drilldown: true
}, {
"y": 2555.6538610446996,
drilldown: true
}, {
"y": 2295.7969994545997,
drilldown: true
}, {
"y": 2083.750450286002,
drilldown: true
}, {
"y": 1042.7531691782997,
drilldown: true
}, {
"y": 600.8115959168999,
drilldown: true
}, {
"y": 367.57857791260005,
drilldown: true
}, {
"y": 215.2800102234,
drilldown: true
}, {
"y": 173.26539802559998,
drilldown: true
}, {
"y": 115.9506267755,
drilldown: true
}, {
"y": 111.3006117336,
drilldown: true
}, {
"y": 106.3389907677,
drilldown: true
}, {
"y": 90.6992223262,
drilldown: true
}, {
"y": 78.10283124449998,
drilldown: true
}, {
"y": 76.0523023606,
drilldown: true
}, {
"y": 60.6059997679,
drilldown: true
}, {
"y": 60.306639909699996,
drilldown: true
}, {
"y": 48.5610792629,
drilldown: true
}, {
"y": 44.905503748200005,
drilldown: true
}, {
"y": 38.2437795848,
drilldown: true
}, {
"y": 28.2788424492,
drilldown: true
}, {
"y": 25.900499820700002,
drilldown: true
}, {
"y": 19.516943574000003,
drilldown: true
}, {
"y": 14.662200450899999,
drilldown: true
}, {
"y": 8.3534003496,
drilldown: true
}, {
"y": 7.6086006463,
drilldown: true
}, {
"y": 4.0950002671,
drilldown: true
}, {
"y": 2.0880999565,
drilldown: true
}, {
"y": 1.670040071,
drilldown: true
}, {
"y": 0.418789953,
drilldown: true
}, {
"y": 0.4134699926,
drilldown: true
}, {
"y": 0.0074499843,
drilldown: true
}, {
"y": 2.0880000000000002e-07,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": 0,
drilldown: true
}, {
"y": -1.3704e-06,
drilldown: true
}, {
"y": -6.6820799112,
drilldown: true
}],
"id": "something",
"name": "Value"
}];
var assetNames = ["Brad 4-12H ", "KRETCHMAR_5-30H_", "Rock 1-16H ", "Martin TR 1-21H ", "Heidi 1-23H ", "Harriet 1-8H ", "RONCK_2-27H_", "Ward 2-34H ", "Conrady 2-14H ", "HUDSON_3-23H_", "Kay 1-24H ", "Boyer 1-36H ", "HOFFMAN_1-16H_", "Kim 2-32H ", "Thomason 2-2H ", "WILDLIFE_1-9H_", "Heidi 3-23H ", "Hazel 1-24H ", "Timberlake 2-16H ", "Ward 3-34H ", "Kilian 1-7H ", "Stafford 1-25H ", "Rickabaugh 1-2H ", "Iva Woods 1-20H ", "Hudson 2-23H ", "BLACKBIRD_3-13H_", "MEANS_3-25H_", "Hoffman 2-16H ", "JOAN_MAR_3-20H_", "RAGAN_2-22H_", "TC_FARMS_1-14H_", "Jennifer 6-34H ", "Clark Trust 4-11H ", "MYRTLE_1-21H_", "Dexter 3-8H ", "BARNARD_3-30H_", "LAUER_1-14H_", "DRACO_2-24H_", "Betty 1-14H ", "Raymond 1-7H ", "Ava Rose 2305 1-16H ", "PHILLIPS_2-22H_", "Wildlife 3-9H ", "Hankey 1-14H ", "Patrick 1-30H ", "Schantz 1-35H ", "KENO_CREEK_1-26H_", "Conrady 1-14H ", "Norma 1-25H ", "Deana 3-24H ", "Lauer 2-14H ", "ROSE_1-20H_", "LIVESTOCK_2-25H_", "CA_2-27H_", "NOEMI_1-30H_", "Beckham 2-15H ", "Haunschild 2-34H ", "Brown 1-26H ", "LAUER_3-14H_", "STEPP_2-19H_", "Oliver 1-14H ", "CA 2820 1-27H ", "JUDY_1-20H_", "Sandy Creek 2-2H ", "CANFIELD_1-23H_", "KENO_CREEK_3-26H_", "Trenton 2-12H ", "Simpson Trust 2-27H ", "Lillian 3-31H ", "JOAN_MAR_2-20H_", "ELMER_2-4H_", "Riley 1-9H ", "Noble 2-16H ", "BLISS_FAM_1-21H_", "Keno Creek 2-26H ", "Gilbert 3-24H ", "Brad 2-12H ", "SANDY_2-19H_", "Patricia 1-7H ", "NOEMI_3-30H_", "Ragan 3-22H ", "Larry 1-29H ", "DAVIS_1-13H_", "Zaloudek 2-24H ", "Hudson 1-23H ", "PETRIK_1-22H_", "Saratoga 3-25H ", "Red Fern 2-16H ", "HUGHES 1-10H", "Gilbert 1-24H ", "SARATOGA_1-25H_", "LIT Trust 5-14H ", "Sean 3-18H ", "Randy 4-19H ", "Molly 1-14H ", "Shrack 1-28H ", "SANDY_1-19H_", "Thomason 1-2H ", "ELMER_1-4H_", "Bird 3-6 ", "Rose 2-20H ", "Victor 1-19H ", "HENSLEE_1-16H_", "Jennie 2-10H ", "William 2-11H ", "Yazel 1-3H ", "Forster 1-8H ", "Jennifer 2-34H ", "William 3-11H ", "Bryant 6-10H ", "Allen 1-5H ", "LIT Trust 1-14H ", "Lori 2-2H ", "Bryant 5-10H ", "Sean 4-18H ", "KIMMY_1-26H_", "Harold 1-26H ", "Lee 2-34H ", "Hoffman 3-16H ", "Liebhart 1-35H ", "Britt 4-20H ", "JoAnn 2-8H ", "Lana 1-1A ", "PAUL_1-24H_", "Ferris 1-5H ", "Hazel 2-24H ", "Sarah 2-34H ", "Harlow 1-28H ", "Cormack 1-30H ", "Yost 1-33H ", "Rahm 1-3H ", "Lee 1-34H ", "Donna Mae 1-23H ", "Gabriel 1-36H ", "Faldtz 1-26H ", "Toews 1-28H ", "Ellis 3-19H ", "NADOLA_4-25H_", "Coach 1-26H ", "Ky 1-34H ", "Kathleen 1-1H ", "RENBARGER_4-12H_", "Montgomery 2-7H ", "Perth 2-1H ", "VICKIE_1-33H_", "Gurney Trust 2-27H ", "Barbara 1-9H ", "South Point Farms 1-17H ", "Starks Trust 1-21H ", "Myra 1-8H ", "Powers 3-2H ", "Nokes 1-35H ", "Tasset 1-34H ", "Boardwalk 2-6H ", "Michael 1-20H ", "Brent 2-6H ", "Appaloosa 2-3H ", "Isaac Farms 1-36H ", "Britt 3-20H ", "NADOLA_3-25H_", "Lawyer 2629 1-30H ", "Miller Trust 1-27H ", "Bones 2821 1-11H ", "Dexter 4-8H ", "Garlow 2-16H ", "RENBARGER_2-12H_", "SHAFER_1-21H_", "JAMES_1-9H_", "LIT Trust 2-14H ", "Bowen 4-34H ", "Powers 1-2H ", "Bleumer 2-13H ", "Clark Trust 2-11H ", "Clark Trust 3-11H ", "Wood 1-17H ", "Bobek 1-22H ", "Sandy Creek 1-2H ", "Noble 1-16H ", "Daniell 1-17H ", "Marks 1-24H ", "Robb 2-16H ", "Fox 3-26H ", "Millershaski 1-15H ", "WATKINS_1-14H_", "STAHL_1-2H_", "Lori A 1-15H ", "Miller 2-3H ", "James 1-4H ", "John 3404 1-20H ", "Kenneth 2-11H ", "Appaloosa 3-3H ", "Lorimer 1-9H ", "Murray 2-5H ", "Bernice 1-17H ", "Schwab 2-29H ", "James 2922 1-13H ", "Unruh 2-17H ", "CONRADY_4-14H_", "PARR_3-36H_", "WAYNE_1-14H_", "Conrady 3-14H ", "SARATOGA_2-25H_", "Richard 3-30H ", "Sutton 3-3H ", "CMG_1-35H_", "James 2-4H ", "Herschelle 1-10H ", "TC Farms 2-14H "];
var theChart = {
chart: {
type: 'column',
height: 300,
spacingTop: 20,
spacingBottom: 50,
spacingLeft: 20,
spacingRight: 20,
style: {
fontFamily: '"open_sansregular", sans-serif'
},
events: {
drilldown: function(e) {
this.setTitle({
text: e.point.name
});
this.update({
scrollbar: {
enabled: false
}
});
this.xAxis[0].update({
max: 5
});
this.addSeriesAsDrilldown(e.point, {
data: [5, 10]
});
},
drillup: function(e) {
// shouldn't hit this
this.setTitle({
text: 'title'
});
this.update({
scrollbar: {
enabled: true
}
});
this.xAxis[0].update({
max: 50
});
}
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
categories: assetNames,
lineColor: '#000000',
scrollbar: {
enabled: true
},
tickColor: '#000000',
tickLength: 5,
max: 50,
range: 50,
},
yAxis: {
title: {
enabled: false
},
lineColor: '#000000',
gridLineWidth: 1,
gridLineColor: '#D8D8D8',
tickColor: '#000000',
tickAmount: 6,
tickWidth: 1,
tickLength: 5,
lineWidth: 1,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
column: {
animation: false
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false
},
point: {
events: {
mouseOver: function() {
$(".highcharts-axis-labels span").eq(this.x).css('text-decoration', 'underline');
},
mouseOut: function() {
$(".highcharts-axis-labels span").eq(this.x).css('text-decoration', 'none');
}
}
},
states: {
hover: {
brightness: -0.2 // darken
}
},
turboThreshold: 0
},
},
tooltip: {
headerFormat: '',
pointFormatter: function() {
let v = this.y;
let hasDecimal = (!isNaN(parseFloat(v)) && v.toString().indexOf('.') > -1);
v = Highcharts.numberFormat(v, hasDecimal ? 2 : 0, '.', ',');
let text = `${this.category} <br /> <strong>${this.series.name}: ${v}</strong>`;
return text;
},
backgroundColor: '#666666',
borderColor: '#CCCCCC',
shadow: false,
style: {
color: '#FFFFFF'
}
},
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none'
}
},
series: series
};
// create the chart
Highcharts.chart('container', theChart);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.src.js"></script>
<div id="container" style="height: 600px; min-width: 310px"></div>
Please help me to solve this problem.
Thank you.
Related
highcharts column stacking Y axis sync - value seem to be represented as an increase on that of previous column
I have the following chart (pic below)
Am i understanding stacking incorrectly? shouldn't the y-Axis value range be [-12, -1]?
instead highcharts seems to add to the value of the previous column for a category when drawing the stack,
ending up with -5.3 + (-9.2) + (-12.0) + (-6.7) = -33.2 and hence drawing the column up to a 33.2 y axis coordinate instead of stacking all the smaller values inside -12.0.
here's my config
my data is sorted by y (see code below), highcharts' documentation mentions
When stacking is enabled, data must be sorted in ascending X order.
{
"chart": {
"styledMode": false,
"backgroundColor": "transparent",
"spacing": [10, 5, 0, 0],
"width": null,
"height": "38%",
"style": { "fontFamily": "inherit" }
},
"plotOptions": {
"area": { "marker": { "enabled": false } },
"spline": { "marker": { "enabled": false } },
"line": { "marker": { "enabled": false } },
"series": { "enableMouseTracking": true },
"column": {
"stacking": "normal",
"dataLabels": { "enabled": true, "inside": true, "format": "{point.y:,.1f}", "style": { "fontWeight": "normal" } }
}
},
"navigation": { "buttonOptions": { "enabled": false } },
"xAxisConfig": {
"xAxisOptions": {
"min": 0.5,
"startOnTick": false,
"endOnTick": false,
"minPadding": 0,
"maxPadding": 0,
"gridLineWidth": 0,
"labels": {
"style": {
"color": "#8095aa",
"lineHeight": "16px",
"textTransform": "uppercase",
"letterSpacing": "1.2px",
"fontSize": "10px",
"fontWeight": "normal"
}
},
"categories": [
"IGA",
"LPD",
"LTK",
"MAN",
"PTE",
"VAL",
"VAM",
"VAS",
"VBA",
"VBS",
"VEB",
"VES",
"VIC",
"VIA",
"VIC",
"VIL",
"VAS",
"VTM"
],
"max": 17
}
},
"yAxisConfig": {
"yAxisOptions": {
"opposite": false,
"gridLineColor": "#8095aa",
"gridLineDashStyle": "Dot",
"title": { "text": null },
"offset": -10,
"startOnTick": false,
"minPadding": 0,
"maxPadding": 0,
"labels": { "style": { "color": "#8095aa", "lineHeight": "16px", "letterSpacing": "0.3px", "fontSize": "12px", "fontWeight": "normal" } },
"tickPixelInterval": 20,
"min": null,
"max": null
}
},
"colors": ["#9bd9a8", "#f9b36c", "#9ea2a5", "#95b3e1", "#cea3a6"],
"series": [
{
"data": [
{ "y": -7.55234464138288, "tooltipLabel": "PTE" },
{ "y": -6.26724628978681, "tooltipLabel": "VAS" },
{ "y": -3.58044975748122, "tooltipLabel": "VAS" },
{ "y": -3.37783607784082, "tooltipLabel": "VBA" },
{ "y": -3.1935940773000002, "tooltipLabel": "VIC" },
{ "y": -0.2846235546, "tooltipLabel": "VIL" },
{ "y": -0.1796231514, "tooltipLabel": "VTM" },
{ "y": -0.0666363456, "tooltipLabel": "MAN" },
{ "y": -0.0464127807, "tooltipLabel": "VES" },
{ "y": -0.0160181769, "tooltipLabel": "VBS" },
{ "y": -0.0086822076, "tooltipLabel": "VAL" },
{ "y": 0, "tooltipLabel": "IGA" },
{ "y": 0, "tooltipLabel": "LPD" },
{ "y": 0, "tooltipLabel": "LTK" },
{ "y": 0, "tooltipLabel": "VAM" },
{ "y": 0, "tooltipLabel": "VEB" },
{ "y": 0, "tooltipLabel": "VIA" },
{ "y": 0, "tooltipLabel": "VIC" }
],
"label": "Q2 19",
"name": "Q2 19",
"type": "column",
"color": "#9bd9a8",
"dashStyle": "Solid",
"lineType": "Solid",
"marker": {},
"connectNulls": true
},
{
"data": [
{ "y": -6.70349414707873, "tooltipLabel": "PTE" },
{ "y": -5.86808436147698, "tooltipLabel": "VAS" },
{ "y": -4.03754309365603, "tooltipLabel": "VAS" },
{ "y": -2.41595741864367, "tooltipLabel": "VBA" },
{ "y": -2.26943358871165, "tooltipLabel": "VIC" },
{ "y": -0.2018974188, "tooltipLabel": "VIL" },
{ "y": -0.0854778045, "tooltipLabel": "VBS" },
{ "y": -0.0758436822, "tooltipLabel": "VES" },
{ "y": -0.0301922313, "tooltipLabel": "VTM" },
{ "y": -0.0165710193, "tooltipLabel": "MAN" },
{ "y": 0, "tooltipLabel": "IGA" },
{ "y": 0, "tooltipLabel": "LPD" },
{ "y": 0, "tooltipLabel": "LTK" },
{ "y": 0, "tooltipLabel": "VAL" },
{ "y": 0, "tooltipLabel": "VAM" },
{ "y": 0, "tooltipLabel": "VEB" },
{ "y": 0, "tooltipLabel": "VIA" },
{ "y": 0, "tooltipLabel": "VIC" }
],
"label": "Q3 19",
"name": "Q3 19",
"type": "column",
"color": "#f9b36c",
"dashStyle": "Solid",
"lineType": "Solid",
"marker": {},
"connectNulls": true
},
{
"data": [
{ "y": -12.0603270249, "tooltipLabel": "VAS" },
{ "y": -9.16146422264508, "tooltipLabel": "PTE" },
{ "y": -3.48553644219686, "tooltipLabel": "VIC" },
{ "y": -3.32470619551604, "tooltipLabel": "VBA" },
{ "y": -2.8986080112, "tooltipLabel": "VAS" },
{ "y": -0.039319459574637, "tooltipLabel": "VBS" },
{ "y": -0.0281927712, "tooltipLabel": "MAN" },
{ "y": -0.0106122489, "tooltipLabel": "VES" },
{ "y": -0.0095501142, "tooltipLabel": "VAM" },
{ "y": -0.0072576636, "tooltipLabel": "VEB" },
{ "y": -0.0014821356, "tooltipLabel": "VTM" },
{ "y": 0, "tooltipLabel": "IGA" },
{ "y": 0, "tooltipLabel": "LPD" },
{ "y": 0, "tooltipLabel": "LTK" },
{ "y": 0, "tooltipLabel": "VAL" },
{ "y": 0, "tooltipLabel": "VIA" },
{ "y": 0, "tooltipLabel": "VIC" },
{ "y": 0, "tooltipLabel": "VIL" }
],
"label": "Q4 19",
"name": "Q4 19",
"type": "column",
"color": "#9ea2a5",
"dashStyle": "Solid",
"lineType": "Solid",
"marker": {},
"connectNulls": true
},
{
"data": [
{ "y": -9.24493828517629, "tooltipLabel": "PTE" },
{ "y": -8.45456974510156, "tooltipLabel": "VAS" },
{ "y": -3.91419326549166, "tooltipLabel": "VAS" },
{ "y": -2.7262006703053, "tooltipLabel": "VBA" },
{ "y": -2.64059928262624, "tooltipLabel": "VIC" },
{ "y": -0.0721207575, "tooltipLabel": "VIL" },
{ "y": -0.027267749714351, "tooltipLabel": "VEB" },
{ "y": -0.0205519149, "tooltipLabel": "LPD" },
{ "y": -0.0057894936, "tooltipLabel": "VBS" },
{ "y": -0.0036789159, "tooltipLabel": "MAN" },
{ "y": -0.0035612511, "tooltipLabel": "VTM" },
{ "y": -0.002792625, "tooltipLabel": "VES" },
{ "y": 0, "tooltipLabel": "IGA" },
{ "y": 0, "tooltipLabel": "LTK" },
{ "y": 0, "tooltipLabel": "VAL" },
{ "y": 0, "tooltipLabel": "VAM" },
{ "y": 0, "tooltipLabel": "VIA" },
{ "y": 0, "tooltipLabel": "VIC" }
],
"label": "Q1 20",
"name": "Q1 20",
"type": "column",
"color": "#95b3e1",
"dashStyle": "Solid",
"lineType": "Solid",
"marker": {},
"connectNulls": true
},
{
"data": [
{ "y": -7.8038549791618, "tooltipLabel": "PTE" },
{ "y": -3.32988974998627, "tooltipLabel": "VAS" },
{ "y": -1.6977913524, "tooltipLabel": "VAS" },
{ "y": -1.5742172985, "tooltipLabel": "VIC" },
{ "y": -1.21077264323422, "tooltipLabel": "VBA" },
{ "y": -0.1701435747, "tooltipLabel": "VAM" },
{ "y": -0.0734110278, "tooltipLabel": "VIL" },
{ "y": -0.057551043, "tooltipLabel": "VES" },
{ "y": -0.0330108867, "tooltipLabel": "VTM" },
{ "y": -0.022080080685649, "tooltipLabel": "VEB" },
{ "y": -0.0122265, "tooltipLabel": "VBS" },
{ "y": -0.0082685988, "tooltipLabel": "MAN" },
{ "y": -0.0059005716, "tooltipLabel": "IGA" },
{ "y": 0, "tooltipLabel": "LPD" },
{ "y": 0, "tooltipLabel": "LTK" },
{ "y": 0, "tooltipLabel": "VAL" },
{ "y": 0, "tooltipLabel": "VIA" },
{ "y": 0, "tooltipLabel": "VIC" }
],
"label": "Q2 20",
"name": "Q2 20",
"type": "column",
"color": "#cea3a6",
"dashStyle": "Solid",
"lineType": "Solid",
"marker": {},
"connectNulls": true
}
]
}
even tried sorting the data arrays in the series by category - if that's what the highcharts documentation means by ascending X order
[
{
"y": 0,
"tooltipLabel": "IGA"
},
{
"y": 0,
"tooltipLabel": "LPD"
},
{
"y": 0,
"tooltipLabel": "LTK"
},
{
"y": -0.0666363456,
"tooltipLabel": "MAN"
},
{
"y": -7.55234464138288,
"tooltipLabel": "PTE"
},
{
"y": -0.0086822076,
"tooltipLabel": "VAL"
},
{
"y": 0,
"tooltipLabel": "VAM"
},
{
"y": -6.26724628978681,
"tooltipLabel": "VAS"
},
{
"y": -3.58044975748122,
"tooltipLabel": "VAS"
},
{
"y": -3.37783607784082,
"tooltipLabel": "VBA"
},
{
"y": -0.0160181769,
"tooltipLabel": "VBS"
},
{
"y": 0,
"tooltipLabel": "VEB"
},
{
"y": -0.0464127807,
"tooltipLabel": "VES"
},
{
"y": 0,
"tooltipLabel": "VIA"
},
{
"y": -3.1935940773000002,
"tooltipLabel": "VIC"
},
{
"y": 0,
"tooltipLabel": "VIC"
},
{
"y": -0.2846235546,
"tooltipLabel": "VIL"
},
{
"y": -0.1796231514,
"tooltipLabel": "VTM"
}
]
but that didn't change the outcome
instead highcharts seems to add to the value of the previous column for a category when drawing the stack, ending up with -5.3 + (-9.2) + (-12.0) + (-6.7) = -33.2
That's exactly how the stacking works, more information you can find here: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts
instead of stacking all the smaller values inside -12.0.
If you want to achieve this you shouldn't use the stacking feature, but set columns position to overlaps each other.
Demo: https://jsfiddle.net/BlackLabel/e9w4r6h8/
plotOptions: {
column: {
pointWidth: 20,
groupPadding: 0.5
}
},
API: https://api.highcharts.com/highcharts/series.column.groupPadding
Highcharts I've lost my drilldown scrollbar
So I'm baby stepping my chart to awesome levels, but somewhere along the way I have lost my scrollbar when drilling down to the detail data. It used to work perfectly, now it just shows however many it can fit in the viewing area and acts like the rest of them are not there.
I've been able to recreate the issue in this JSFiddle: https://jsfiddle.net/BigSexy/qx5uzdf6/38/
var categoriesSL = ['Elementary', 'Middle', 'High'];
var categoriesElem = ["Ack/Bingham (E)", "Ackerly (E)", "AR Kennedy", "Atkinson", "Auburndale", "Audubon", "Bates", "Bellewood (E)", "Binet (E)", "Blake"];
var categoriesMid = ["Ack/Bingham (M)", "Ackerly (M)", "Barret", "Bellewood (M)", "Binet (M)", "Boys Haven (M)", "Brook-Dupont (M)", "Brook-KMI (M)", "Brooklawn (M)", "Brown (M)"];
var categoriesHigh = ["Ack/Bingham (H)", "Ackerly (H)", "Atherton", "Ballard", "Bellewood (H)", "Binet (H)", "Boys Haven (H)", "Breck-Metro", "Brook-KMI (H)", "Brooklawn (H)"]
refChart = new Highcharts.chart('ctReferrals', {
chart: {
backgroundColor: 'whiteSmoke',
events: {
drilldown: function() {
switch (this.ddDupes[0]) {
case 'elem':
case 'elem2':
refChart.xAxis[0].setCategories(categoriesElem);
break;
case 'mid':
case 'mid2':
refChart.xAxis[0].setCategories(categoriesMid);
break;
case 'high':
case 'high2':
refChart.xAxis[0].setCategories(categoriesHigh);
break;
default:
break;
}
refChart.xAxis[0].update({
max: 5
}, true);
console.log('scroll!');
this.update({
scrollbar: {
enabled: true,
}
}, false);
},
drillupall: function() {
refChart.xAxis[0].setCategories(categoriesSL);
refChart.xAxis[0].update({
max: 2
}, true);
console.log('dont scroll!');
this.update({
scrollbar: {
enabled: false
}
}, false);
}
},
type: 'column',
},
title: {
text: 'Total # of Referrals by School Level'
},
subtitle: {
text: 'By Year'
},
xAxis: {
categories: categoriesSL,
min: 0,
max: 2,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
},
}
},
series: [{
name: '2017-18',
data: [{
color: '#7cb5ec',
drilldown: 'elem',
y: 13734
}, {
color: '#7cb5ec',
drilldown: 'mid',
y: 11999
}, {
color: '#7cb5ec',
drilldown: 'high',
y: 21245
}]
}, {
name: '2018-19',
data: [{
color: '#90ed7d',
drilldown: 'elem2',
y: 12500
}, {
color: '#90ed7d',
drilldown: 'mid2',
y: 10617
}, {
color: '#90ed7d',
drilldown: 'high2',
y: 21044
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
id: 'elem',
name: '2017-18',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#7cb5ec",
drilldown: "elem",
y: 5
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#7cb5ec",
drilldown: "elem",
y: 562
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#7cb5ec",
drilldown: "elem",
y: 88
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#7cb5ec",
drilldown: "elem",
y: 48
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#7cb5ec",
drilldown: "elem",
y: 51
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#7cb5ec",
drilldown: "elem",
y: 271
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#7cb5ec",
drilldown: "elem",
y: 282
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#7cb5ec",
drilldown: "elem",
y: 44
}
]
}, {
id: 'elem2',
name: '2018-19',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#ff6961",
drilldown: "elem2",
y: 43
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#90ed7d",
drilldown: "elem2",
y: 178
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#90ed7d",
drilldown: "elem2",
y: 83
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#90ed7d",
drilldown: "elem2",
y: 9
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#ff6961",
drilldown: "elem2",
y: 103
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#ff6961",
drilldown: "elem2",
y: 33
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#ff6961",
drilldown: "elem2",
y: 322
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#90ed7d",
drilldown: "elem2",
y: 74
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#ff6961",
drilldown: "elem2",
y: 57
}
]
}, {
id: 'mid',
name: '2017-18',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#7cb5ec",
drilldown: "mid",
y: 27
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#7cb5ec",
drilldown: "mid",
y: 178
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#7cb5ec",
drilldown: "mid",
y: 2
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#7cb5ec",
drilldown: "mid",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#7cb5ec",
drilldown: "mid",
y: 25
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#7cb5ec",
drilldown: "mid",
y: 677
}
]
}, {
id: 'mid2',
name: '2018-19',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#ff6961",
drilldown: "mid2",
y: 37
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#90ed7d",
drilldown: "mid2",
y: 80
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#ff6961",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#ff6961",
drilldown: "mid2",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#ff6961",
drilldown: "mid2",
y: 35
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#90ed7d",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#90ed7d",
drilldown: "mid2",
y: 625
}
]
}, {
id: 'high',
name: '2017-18',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#7cb5ec",
drilldown: "high",
y: 1322
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#7cb5ec",
drilldown: "high",
y: 604
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#7cb5ec",
drilldown: "high",
y: 553
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#7cb5ec",
drilldown: "high",
y: 12
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#7cb5ec",
drilldown: "high",
y: 725
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#7cb5ec",
drilldown: "high",
y: 52
}
]
}, {
id: 'high2',
name: '2018-19',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#90ed7d",
drilldown: "high2",
y: 1079
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#90ed7d",
drilldown: "high2",
y: 548
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#ff6961",
drilldown: "high2",
y: 647
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#ff6961",
drilldown: "high2",
y: 13
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#ff6961",
drilldown: "high2",
y: 823
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#ff6961",
drilldown: "high2",
y: 81
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#90ed7d",
drilldown: "high2",
y: 3
}
]
}]
},
exporting: {
scale: 2,
chartOptions: {
xAxis: [{
categories: categoriesElem,
min: 0,
max: categoriesElem.length
}]
}
},
credits: {
enabled: false
}
})
$(function() {
(function(H) {
//DATALABELS
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
var css = this.chart.options.drilldown.activeDataLabelStyle;
proceed.call(this);
css.textDecoration = 'none';
css.fontWeight = 'bold';
css.cursor = 'default';
css.color = 'black';
H.each(this.points, function(point) {
if (point.drilldown && point.dataLabel) {
point.dataLabel
.css(css)
.on('click', function() {
return false;
});
}
});
});
})(Highcharts);
})
And here's a link to the actual graph if that helps any: https://assessment.jefferson.kyschools.us/DMC/District%20Datacard/ddReferrals
Any help you could give would be greatly, greatly appreciated
You used Highcharts source code: <script src="https://code.highcharts.com/highcharts.js"></script> The scrollbar feature is available only for Highstock: <script src="https://code.highcharts.com/stock/highstock.js"></script> Live demo: https://jsfiddle.net/BlackLabel/a126pnxv/
Highcharts yaxis negative values error
I am using HighCharts to ploot some graph. I want my y-aixs to range between -1 to +1. When i set max=1 and min=-1 for y-axis, it does not work. Is there another way of implementing this. Below is the my code example.
$(opts.containerSelector).find('.chart-container').highcharts({
chart: {
events: {
load: loadLegendSelection
},
},
plotOptions: {
area: {
fillOpacity: 0.7
},
spline: {
marker: {
radius: 3
}
},
series: {
events: {
legendItemClick: storeLegendSelection
}
}
},
legend: {
},
loading: {
labelStyle: { "position": "relative", "top": "45%", "font-weight": "300", "color": "#29303a", "font-size": "22px" }
},
xAxis: {
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
min: minDate,
max: maxDate,
type: 'datetime',
labels: {
formatter: function() {
return formatTimestampTime(this.value);
}
},
events : {
afterSetExtremes : afterSetExtremes.bind(this, opts)
},
minRange: 3600 // one minute
},
yAxis: {
max: 1,
min: -1,
endOnTick: false,
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
labels: {
formatter: function() {
return formatMegawatts(this.value);
}
},
showFirstLabel: false,
title: ''
},
series: convertedData,
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter:
function() {
return '<b>' + formatTimestampDateTimeWithSeconds(this.x) + '</b><br>' + formatMegawatts(this.y) + ' ('+ this.series.name + ')';
}
}
});
you can try setting min and max as given below.
yAxis: [{
max:1,
min: -1,
allowDecimals: false,
endOnTick: false,
gridLineWidth: 0,
labels: {
style: {
color: '#767676'
}
},
offset: -10,
title: {
text: 'Inv ' + val_qty,
"textAlign": 'top',
"rotation": 0,
x: 60,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
}
}, {
allowDecimals: false,
min: 0,
endOnTick: false,
gridLineWidth: 0,
title: {
text: y2axisname,
"textAlign": 'top',
"rotation": 0,
x: -75,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
},
offset: -10,
labels: {
format: '{value}',
style: {
color: '#767676'
}
},
opposite: true
}],
HighCharts - 2nd yAxis graphs not scaling correctly
i'm having a problem with my second yAxis using HighCharts. The spline graph scales correctly, however the bar graph (second yAxis) does not. Note that the bar graph has two sections - the irrelevant section is invisible.
http://jsfiddle.net/warricksmith/jqvxf30z/1/
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
backgroundColor: null,
spacingBottom: 6,
spacingLeft: 2,
spacingRight: 2,
spacingTop: 2
},
credits: {
enabled: false
},
global: {
useUTC: false
},
legend: {
align: "center",
enabled: true,
layout: "horizontal",
verticalAlign: "bottom",
y: 5
},
navigator: {
enabled: false,
height: 40,
series: {
color: "#21B567"
}
},
plotoptions: {
column: {
borderwidth: 0
},
line: {
lineWidth: 1,
marker: {
enabled: false
}
},
series: {
pointInterval: null,
pointStart: null
},
spline: {
lineWidth: 2,
marker: {
enabled: true
}
}
},
rangeselector: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'Peak Demand',
stacking: null,
title: 'kVA',
type: 'spline',
color: "#FF6F34",
data: [821,
794,
737,
748,
778,
794,
889,
831,
819,
821,
821,
877],
tooltip: {
valueSuffix: 'kVA'
}
}, {
name: "Power at peak",
stacking: null,
title: "kVA",
tooltip: {
valueSuffix: " kVA"
},
type: "spline",
color: "#33BAE3",
data: [788,
770,
722,
733,
747,
755,
747,
814,
803,
804,
805,
737]
}, {
color: "#339A63",
data: [
0.04,
0.03,
0.02,
0.02,
0.04,
0.05,
0.16,
0.02,
0.02,
0.02,
0.02,
0.16],
name: "Power factor (lagging)",
stacking: 'normal',
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, {
color: "rgba(245,241,232,0)",
data: [
0.96,
0.97,
0.98,
0.98,
0.96,
0.95,
0.84,
0.98,
0.98,
0.98,
0.98,
0.84, ],
name: "Power factor (leading)",
stacking: "normal",
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, ],
title: {
text: 'Peak Demand and Power factor'
},
subtitle: {
text: 'Power-Star'
},
xAxis: [{
categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14',
'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'],
lables: {
style: {
fontSize: "12px",
fontWeight: "bold"
}
},
tickPixelInterval: 150,
tickPosition: "inside",
type: "category"
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 1,
index: 0,
labels: {
style: Object,
y: 10
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
title: {
text: "kVA"
}
}, {
gridLineWidth: 0,
index: 1,
labels: {
enabled: false
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 2,
labels: {
y: 10
},
max: 1,
maxPadding: 0,
min: 0.8,
opposite: true,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 3,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 4,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}],
tooltip: {
shared: true
},
});
});
The problem is that you have so many yAxes that you made a mistake. You are connecting series to yAxis: 1 which means second yAxis in the options. Meanwhile you are setting min and max for third, fourth and fifth yAxes and enabling labels only for the third one.. Fixed demo: http://jsfiddle.net/jqvxf30z/2/ I set yAxis: 2 for series, since that yAxis is most probably responsible for columns.
Highcharts: dynamic update stacked area with extra custom data
I want to display custom prompt info in stacked area chart using the technique referred in (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
The chart works fine on the initial data, but does not working when dynamic adding new Points.
The source code is in http://jsfiddle.net/ukNPz/1/
$(function () {
var clusterInfoChart;
var clusterOptions = {
chart: {
type: 'area',
renderTo: 'container',
events: {
load: function () {
S = this.series;
setInterval(function () {
var seconds = Math.round(new Date() / 1000);
seconds = seconds - 1397529601 + 1235;
console.log(seconds);
var shift = S[0].data.length > 10;
S[0].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
S[1].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
clusterInfoChart.redraw();
}, 3000);
}
}
},
title: {
text: 'clusterInfo'
},
xAxis: {
categories: [
'1205', '1210', '1215', '1220', '1225', '1230', '1235'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Events'
},
labels: {
formatter: function () {
return this.value.y;
}
}
},
tooltip: {
formatter: function () {
return this.point.yinfo.replace(";", "<br>");
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Alert',
data: [
{
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}
]
}, {
name: 'Warn',
data: [
{
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}
]
}]
};
Highcharts.setOptions({
global: {
useUTC: false
}
});
clusterInfoChart = new Highcharts.Chart(clusterOptions);
});
Just this format isn't proper:
[seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}]
Should be:
{
x: seconds,
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}