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/

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

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,
},
}
},

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.

Label aligment in Google ColumnChart

I'm having trouble trying to changing the position of the labels in this Google ColumnChart. The chart is rendered via the Keen.io JS SDK. I've got a very tight space to work in and I'm trying to position the labels underneath the chart instead of on the right hand side (where the label text is truncated). Here is a screenshot -
I've included my config object below. Is there an option I'm missing - nothing to seems to shift the labels from the right hand side. Thanks.
{
chartType: 'columnchart',
chartOptions: {
isStacked: true
},
fontName : 'Helvetica',
fontSize : '11px',
width : 270,
height : 220,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS',
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
}

All of those Google-specific configurations should go inside of chartOptions object. Give this a try and let me know how it goes:
{
chartType: 'columnchart',
chartOptions: {
fontName : 'Helvetica',
fontSize : '11px',
isStacked: true,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
},
width : 270,
height : 220,
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS'
}
Update: You might also enjoy working with C3.js more.. we added a C3 adapter in v3.1. Here's a jsFiddle demonstrating how to use it: http://jsfiddle.net/keen/0mL925vr/