We Keep Coding

How to set 2 y-axis title (and/or label) on chartjs?

I know that setting a title or a label on chartjs' charts takes only a few properties on chart options.
...
yAxes: [{
scaleLabel: {
display: true,
labelString: "My Chart"
}
}]
...
but, is there anyway to set 2 title/label on chartjs ? I'd like to add some sort of a sub-title.

There is no option for yAxes subtitles but you can use a secondary yAxis properly configured:
scales : {
yAxes : [{
scaleLabel : {
display : true,
labelString : "subtitle",
fontStyle : 'italic'
}
}, {
display : true,
gridLines : {
display : false,
color : 'transparent'
},
ticks : {
display : false
},
scaleLabel : {
display : true,
labelString : "My Chart title",
fontStyle : 'bold',
fontSize : 14
}
}
]
}
Check this fiddle: https://jsfiddle.net/beaver71/jg7Lgc43/

highchart stock : graph disappear when containing weekend data point

Recently I met a very strange problem when using highchart stock(highstock.js). I load some data points which containing Saturday data point. When application runs, at first it looks like this:
No graph appear, only the navigator and the time axis label. However, when I drag the navigator to the full size, the graph appear, but the x-axis time label disappear, it looks like this:
I have built a plunker here: graph disappear when met weekend data point link
some main configuration codes are as below:
scrollbar : {
barBackgroundColor : 'gray',
barBorderRadius : 7,
barBorderWidth : 0,
buttonBackgroundColor : 'gray',
buttonBorderWidth : 0,
buttonArrowColor : 'yellow',
buttonBorderRadius : 7,
rifleColor : 'yellow',
trackBackgroundColor : 'white',
trackBorderWidth : 1,
trackBorderColor : 'silver',
trackBorderRadius : 7,
// enabled: false,
liveRedraw : false
},
navigator : {
xAxis : {
labels : {
formatter : function(e) {
console.log("value : " + this.value);
console.log("value :" + typeof this.value)
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
handles : {
backgroundColor : '#808080'
},
//margin : -10
},
xAxis : {
type : 'datetime',
tickLength : 0
},
Can anyone tell me why?

I have found the true reason. It is not because the weekend data point, but because the data is not sorted in time ascending order.

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.

chart catergory label will only rotate from the center?

I am just starting to learn EXT JS and I've tried combing through the tutorials but don't seem to find much luck with my problem. My issue is that I have a bar chart, and I wanted to rotate the labels to allow for more space. I can rotate them fine, but it appears that the point of rotation is based on the middle of the label. I'd prefer for the end of the label to line up with the mark for that specific column.
Here's a picture if that didn't make sense:
What I have:
What I want:
It seems like what I want to achieve is a pretty standard thing, but I can't seem to find much about the issue.
snippet of code:
{
xtype : 'cartesian',
store : 'Store1',
height : 350,
width : 390,
flipXY : true,
axes : [
{
type : 'category',
position : 'left',
label : {
rotation : {
degrees : -15
}
}
},
{
type : 'numeric',
position : 'bottom'
}
],
series : [
{
type : 'bar',
xField : 'cName',
yField : 'cNumber',
colors : ['#99CCFF'],
label : {
display : 'outside',
field : 'cNumber'
}
}
]
}

You can set textAlign: 'end', change the label config to:
label: {
textAlign: 'end',
rotation: {
degrees: -15
}
}
EDIT
After playing around with the label config, hope this is what your looking for:
label: {
textAlign: 'end',
textBaseline: 'hanging',
x: -10,
y: -10,
rotation: {
degrees: -15,
centerX: -5
}
}
Working example: https://fiddle.sencha.com/#fiddle/uea

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