We Keep Coding

How to display negative values below the x-axis in C3.js

This is how I want it to look like negative values below x-axis and negative values wrapped in circular brackets.
C3.js Code
var chart = c3.generate({
bindto : "#totalDollarFlow",
size : {
height : 400,
width : 700
},
title : {
text : data.title
},
data : {
x : labels,
columns : data.columns,
axes : {
data1 : 'y',
},
type : 'bar',
types : {
data1 : 'line',
},
names : {
},
colors : {
data1 : '#2ca02c',
},
selection : {
enabled : true,
draggable : false,
multiple : true,
grouped : true
}
},
subchart : {
show : false
},
point : {
show : false
},
zoom : {
enabled : true,
rescale : true
},
grid : {
y : {
show : true
}
},
regions : [ {
axis : 'y',
start : 186,
end : 187,
class : 'regionY'
} ],
axis : {
x : {
type : 'category',
tick : {
rotate : 90,
centered : true,
fit : true,
multiline : false,
culling : {
max : 60
}
},
},
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format : d3.format("$,")
}
},
}
});
How the chart looks like at present.

I'm not sure if everything you want is possible but at least you can get close to it. For your y-Axis you can use this format:
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format: function (d) {
const realNumber = d*1000000;
return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
}
}
To get a line at 0 you can define a grid-line for the y-axis at position 0. You can also set a text here, but only one text to describe what this line is for and not like your ticks. I think this is even better than having the timestamp floating in your chart.
grid : {
y : {
show : true,
lines: [
{value: 0},
]
}
}
This line might be a little bit thin, but you can make it thicker when you change its css. I think it was c3-ygrid-line. To get more information you can always use the reference

Highcharts legend is cutting off

I am trying to plot a heatmap using highcharts api using the following chart options:
{
chart : {
renderTo : 'chartContainer',
type : 'heatmap'
},
title : {
text : "abcd"
},
xAxis : {
categories : []//categories,
tickWidth : 0,
title : {
text : "Months"
},
},
yAxis : {
categories : []//categories,
lineWidth : 1,
title : {
text : "xyz"
}
},
colorAxis : {
min : minValue,
max : maxValue,
gridLineWidth : 2,
marker : null,
tickWidth : 0,
tickInterval : tickInterval
},
legend : {
align : 'right',
layout : 'vertical',
verticalAlign: 'middle',
symbolHeight : 250
},
tooltip : {
enabled : false
},
navigation : {
buttonOptions : {
verticalAlign : 'top',
y : -10
}
},
series : [] //series data
};
But legend is somehow cutting at the top. Please check the following snapshot:
Chart Screenshot
I tried the different combinations of legend options mentioned in http://api.highcharts.com/highcharts#legend
Also, tried increasing the height of the chart container.
Still, the legend is still cutting at the top.
Any help/suggestions?

Finally, the issue got resolved. It was occurring because of the 'symbolHeight' property of the legend. I reduced it to 150 and the legend stopped cutting off.

for me, the answer was to increase the legend:itemMarginTop to 20;

For me, it worked by slightly reducing the font-size.
legend:{
itemStyle: {
fontSize: "10px"
},
}
For this, I also had to change the symbolHeight to adjust it according to my font size.
Font size defaults to 12px.
Ref: https://api.highcharts.com/highcharts/legend.itemStyle
Hope this helps. Peace.

Highcharts : trouble with axis Label

I can't explain this behavior :
Sometimes, my charts are displaying the first or the last label of the axis with a lot of decimals.
In my graph options, here is how the yAxis look like :
yAxis : [{
alternateGridColor: "white",
gridLineColor : "#E3E3E3",
lineWidth: 2,
tickLength : 5,
lineColor : '#A5A5A5',
tickWidth : 2,
tickLength : 5,
tickColor : '#A5A5A5',
labels : {
style : {
fontWeight : 'bold',
fontSize: '10px'
},
x : -labelMargin
},
tickPixelInterval: 20
},
//more axis
]
How to fix that ? Any help appreciated.

You did not mentioned what should be the value of your labels so it uses the naive value for them that could be float number generated by a division perhaps.
I suggest you to handle your labels manually something like this:
labels: {
formatter: function () {
return Math.floor(this.value)
}
}
As you can see i use floor() function to remove decimals.

HighStocks Tooltip is not working properly

I've simply used the out-of-the-box example from highcharts:
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
inputEnabled: $('#container').width() > 480,
selected : 1
},
title : {
text : 'Sample Stock Price'
},
series : [{
name : 'Sample Stock Price',
data : data,
type : 'areaspline',
threshold : null,
tooltip : {
valueDecimals : 0
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
});
});
I replaced the "data" variable with programmatically populated values:
[[1409788800000,14215],[1409702400000,14332],[1409616000000,14569],[1409529600000,14898],[1409443200000,15144],[1409356800000,15335],[1409270400000,15531],[1409184000000,15647],[1409097600000,15454],[1409011200000,15143],[1408924800000,15179],[1408838400000,15537],[1408752000000,15784],[1408665600000,15844],[1408579200000,15998],[1408492800000,15678],[1408406400000,15148],[1408320000000,15106],[1408233600000,15327],[1408147200000,15642],[1408060800000,15781],[1407974400000,15686],[1407888000000,15349],[1407801600000,14830],[1407715200000,14770],[1407628800000,14948],[1407542400000,15217],[1407456000000,15495],[1407369600000,15414],[1407283200000,14976],[1407196800000,14494],[1407110400000,14572],[1407024000000,14979],[1406937600000,15541],[1406851200000,15905],[1406764800000,16076],[1406678400000,15997],[1406592000000,15698],[1406505600000,15777],[1406419200000,16012],[1406332800000,16239],[1406246400000,16367],[1406160000000,16393],[1406073600000,16131],[1405987200000,15862],[1405900800000,16002],[1405814400000,16206],[1405728000000,16478],[1405641600000,16683],[1405555200000,16803],[1405468800000,16666],[1405382400000,16625],[1405296000000,16992],[1405209600000,17075],[1405123200000,17127],[1405036800000,17262],[1404950400000,17351],[1404864000000,17154],[1404777600000,16943],[1404691200000,16656],[1404604800000,16718],[1404518400000,16943],[1404432000000,17197],[1404345600000,17379],[1404259200000,17505],[1404172800000,17255],[1404086400000,17191],[1404000000000,17299],[1403913600000,17468],[1403827200000,17664],[1403740800000,17741],[1403654400000,17563],[1403568000000,17371],[1403481600000,17049],[1403395200000,17144],[1403308800000,17320],[1403222400000,17492],[1403136000000,17598],[1403049600000,17670],[1402963200000,17187],[1402876800000,17157],[1402790400000,17226],[1402704000000,17425],[1402617600000,17625],[1402531200000,17746],[1402444800000,17465],[1402358400000,16844],[1402272000000,16937],[1402185600000,17043],[1402099200000,17684],[1402012800000,18140],[1401926400000,18304],[1401840000000,18104],[1401753600000,17486],[1401667200000,16666],[1401580800000,15873],[1401494400000,15528],[1401408000000,15495],[1401321600000,15474],[1401235200000,15391],[1401148800000,15380],[1401062400000,15421],[1400976000000,15352],[1400889600000,15312],[1400803200000,15248],[1400716800000,15258],[1400630400000,15323],[1400544000000,15437],[1400457600000,15492],[1400371200000,15427],[1400284800000,15429],[1400198400000,15492],[1400112000000,15473],[1400025600000,15439],[1399939200000,15400],[1399852800000,15373],[1399766400000,15373],[1399680000000,15621],[1399593600000,15645],[1399507200000,15692],[1399420800000,15666],[1399334400000,15583],[1399248000000,15533],[1399161600000,15667],[1399075200000,15514],[1398988800000,15478],[1398902400000,15389],[1398816000000,15414],[1398729600000,15161],[1398643200000,15022],[1398556800000,15305],[1398470400000,15575],[1398384000000,15608],[1398297600000,15514],[1398211200000,15339],[1398124800000,15177],[1398038400000,15352],[1397952000000,15743],[1397865600000,15983],[1397779200000,16090],[1397692800000,16069],[1397606400000,15855],[1397520000000,15761],[1397433600000,15556],[1397347200000,15737],[1397260800000,15889],[1397174400000,15961],[1397088000000,15950],[1397001600000,15853],[1396915200000,15699],[1396828800000,15906],[1396742400000,16205],[1396656000000,16394],[1396569600000,16303],[1396483200000,16228],[1396396800000,16256],[1396310400000,16065],[1396224000000,15905],[1396137600000,15863],[1396051200000,15766],[1395964800000,15646],[1395878400000,15585],[1395792000000,15583],[1395705600000,15605],[1395619200000,15590],[1395532800000,15643],[1395446400000,15609],[1395360000000,15593],[1395273600000,15550]]
The tooltip is no longer working properly, and the graph does not appear for any of the button ranges except "All"
Here is a JSFiddle of what I have:
http://jsfiddle.net/9Lwp0dw6/1/
Any help is greatly appreciated - Thank You!

In the debugger, highcharts is throwing this error - highcharts.com/errors/15. It is basically saying it wants sorted data. You will have to sort the array

HighChart flags Data load issues

I am working on drawing graphs from our data. There is no problem on drawing graph basically. The only problem is that the flags information is not loaded and located on the graph lines. Let me give you the issues on it.
Data cannot be brought to the graph if it has over 900 numbers of items.
One data might have more than 4000 items.
Instead using one big data, I tried to spilt one data into small pieces of data. Each piece of data has 800 items, and they are intended being loaded on the graph sequentially. However, this process was not easily done well. Sometime the graph module cannot load every piece exactly. Moreover, this process take much time than using one data.
I wonder whether an appropriate way to load flag data which contains many items exits or not.
$(function() {
var report_data;
$.ajax({
type: "post",
url:"/apps.chart/chart.reportShort",
data:"callback=?&report_type=CO&business_code=005930",
dataType:"json",
success:function(report){
report_data = report;
}
});
$.getJSON('/apps.chart/chart.chartList?callback=?&report_type=CO&business_code=005930', function(data) {
// Create the chart
$('#chartView').highcharts('StockChart', {
chart: {
plotBorderColor: '#346691',
plotBorderWidth: 2,
height: 600
},
rangeSelector : {
inputEnabled: $('#chartView').width() > 400,
selected : 1
},
title : {
text : 'SK'
},
tooltip: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y년 %m월 %d일'
},
style: {
width: '300px'
},
valueDecimals: 0
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m.%d',
week: '%m.%d',
month: '%Y.%m',
year: '%Y'
}
},
yAxis : {
labels : {
formatter : function() {
var n = this.value;
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');
return n;
},
align : 'left',
x : 5,
y : 2
},
maxPadding: 0.2,
minPadding: 0,
minorTickInterval: 'auto',
title : {
text : '금액(원)',
}
},
series : [{
name : '종가',
data : data,
id : 'dataseries',
marker : {
enabled : true,
radius : 3
},
shadow : true,
tooltip : {
valueDecimals : 0
}
}
// the event marker flags
,{
type : 'flags',
data : report_data,
style: {
cursor: 'hand'
},
onSeries : 'dataseries',
shape : 'circlepin',
width : 15,
height : 15,
color : '#121212'
}
]
});
});
});

Probably the problem is that you call two ajax asynchronously, so I advice you to next ajax insiae first callback and then initialise chart.