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/

Tred Chart Using Highcharts Chart

in an html page I'm trying to use Highcharts Chart to build a chart but the sometimes data label disappear behind the graph (e.g. image below)
This is my js code that build the graph:
var chartBehaviour = new Highcharts.Chart({
chart : {
renderTo : 'driving-behaviour-chart',
type : 'column'
},
xAxis : {
categories : labelXAxis,
lineColor : "#f5f5f5",
tickLength : 0,
labels : {
y: 40,
style : {
'color' : '#666666',
fontSize : '14px',
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif'
}
}
},
yAxis : {
title : {
enabled : false
},
gridLineColor : "#f5f5f5",
tickInterval : 10,
labels : {
style : {
'color' : '#666666',
fontSize : '12px',
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif'
}
}
},
credits : {
enabled : false
},
title : false,
tooltip : false,
legend : false,
plotOptions : {
series : {
borderWidth : 0,
pointWidth : 22
},
column : {
animation : false,
pointPadding : 0.23,
dataLabels : {
enabled : true,
align : 'left',
enabled : true,
rotation : 0,
verticalAlign : "top",
x : -1,
y : -30,
style : {
"color" : "#68a1b1",
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif',
fontSize : "14px"
}
},
states : {
hover : {
enabled : false
}
}
}
},
series : [{
data : trends.drivingBehaviour,
color : "#68a1b1",
borderRadiusTopLeft : 5,
borderRadiusTopRight : 5,
borderRadiusBottomRight : 5,
borderRadiusBottomLeft : 5
}
]
});
What am I doing wrong? How can I fix this graph? Thank you.

How to resize bar graph in c3.js

I want to make the c3.js graph smaller than it actually is right now. I played with the width but it cuts off the larger value if its not 620.
The red color graph is 620px. I want it to be the size of the first graph with all the values showing without any fade/cutoff.
var chart = c3
.generate({
bindto : "#topSources",
size : {
height : 180,
width : 620
},
bar : {
width : 16
},
padding : {
right : 230,
top : 50
},
color : {
pattern : [ '#008000', '#008000', '#008000', '#008000',
'#008000' ]
},
data : {
columns : [ [ 'Throughput', data.columns[0][1],
data.columns[0][2], data.columns[0][3],
data.columns[0][4], data.columns[0][5] ] ],
type : 'bar',
labels : {
format : {
Throughput : d3.format('$'),
}
},
color : function(inColor, data) {
var colors = [ '#008000', '#008000', '#008000',
'#008000', '#008000' ];
if (data.index !== undefined) {
return colors[data.index];
}
return inColor;
}
},
axis : {
rotated : true,
x : {
type : 'category',
show : false,
},
y : {
show : false
}
},
tooltip : {
grouped : false
},
legend : {
show : false
}
});

Set a value for axis padding (bottom of the y axis in this instance since it's a rotated bar chart). 80px will cover most of the lengths of your labels - if you change the font size etc it'll need to be different
axis : {
...
y : {
show : false,
padding: { // use these 3 lines
bottom: 80,
},
}
},

Google Charts legends overlapping

I am new to Stackoverflow and google charts.
I am facing a problem in one of my project which uses google charts api, I am drawing two legends but they are overlapping on preview.
I tried various solution on stackoverflow and jsfiddle but none of them worked.
Here are some of my code snippet and output:
Configuration Object for Chart :
var options = {
hAxis : {
title : xAxis,
textStyle:{
color: 'black',
fontSize : '8px'
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : '15px',
italic : false
},
},
vAxis : {
title : yAxis,
format:format,
textStyle:{
color: 'black',
fontSize : '8px'
},
titleTextStyle : {
fontSize : '15px',
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0,
//max: 1200000
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 350,
height : 180,
chartArea : {
left : 40,
width : '45%',
height : '45%'
},
legend: {
position: 'top',
maxLines: 3,
},
series : {
0 : {
color : line1Color,
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : line2Color,
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
Output:
https://snag.gy/Yd2qjX.jpg

unfortunately, there isn't an option for forcing multiple lines on the legend
I could never get the legends to overlap as in the screen shot,
instead each would be cutoff, with '...' at the end
but the only way I could get the legend text to drop to another line and not cutoff,
was by increasing the width by a rediculous amout
needed to adjust chartArea.width as well
so you might be able to continue to adjust both width and chartArea.width,
until you get the desired result
one other note, anytime you use fontSize in the chart options,
it should be a number, instead of a string, i.e.
fontSize : 8
vs.
fontSize : '8px'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
[new Date('08/01/2015'), 0.2, 0.0],
[new Date('09/01/2015'), 0.8, 0.0],
[new Date('10/01/2015'), 1.0, 2.2],
[new Date('11/01/2015'), 1.3, 1.2],
[new Date('12/01/2015'), 1.8, 1.4],
[new Date('01/01/2016'), 2.4, 1.5],
[new Date('02/01/2016'), 2.5, 1.4],
[new Date('03/01/2016'), 2.6, 1.5],
[new Date('04/01/2016'), 2.5, 1.5],
[new Date('05/01/2016'), 2.4, 1.6],
[new Date('06/01/2016'), 2.3, 1.6],
[new Date('07/01/2016'), 2.2, 1.5]
]);
var options = {
hAxis : {
title : 'xAxis',
format: 'MMM-yy',
textStyle:{
color: 'black',
fontSize : 8
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : 15,
italic : false
},
},
vAxis : {
title : 'yAxis',
format: '#,##0.0',
textStyle:{
color: 'black',
fontSize : 8
},
titleTextStyle : {
fontSize : 15,
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 780,
height : 180,
chartArea : {
left : 40,
width : 310,
height : '45%'
},
legend: {
position: 'top',
maxLines: 3
},
series : {
0 : {
color : '#154360',
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : '#5499C7',
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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.