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,
},
}
},
Related
I have written a function that creates a chart based on some graphdata as parameter and renders it to a div . Now I am reusing this function to generate same type of chart on same div to load different series data . The problem is I can see the graph rendering shows previous charts labels for a second and then the new graph gets loaded with new labels . I dont want to see the old graph when my new graph gets loaded . Please help .
My chart function :
<html>
<head>
<script src="./jquery.min.jsl"></script>
<script src="./highcharts.jsl"></script>
<script src="./exporting.jsl"></script>
<meta name="viewport" content="user-scalable=no">
<script>
function renderGraph(graphdata) {
var graphObj = JSON.parse(graphdata);
var chart = null;
Highcharts.setOptions({
lang : {
numericSymbols : ["K", "M", "G", "T", "P", "E"]
}
});
var change = {
0 : '$0K',
2 : '$2K',
4 : '$4K',
6 : '$6K',
8 : '$8K'
};
var xAxisLegends = graphObj.bottomLegends;
var seriesData = graphObj.seriesData;
var xAxisLegends = graphObj.bottomLegends;
//['Q2, 16', 'Q3, 16', 'Q4, 16', 'Q1, 17'];
var columnColors = ["#69C3DB", "#3a8a9f"];
var seriesData = graphObj.seriesData;
/*[{
name : 'Budget',
showInLegend : false,
data : [2, 4, 6, 8]
}, {
name : 'Utilisation',
showInLegend : false,
data : [1, 2, 3, 4]
}];*/
// variables which have diff values according to OS
var chartProperties = {};
// properties to assign to Charts's object
var graphHeight = 0;
// height of chart
var graphWidth = 0;
//Width of the column
var pointWidth;
// Separating the graph dimensions & styling properties as per OS name & version
if (graphObj.osname == "iphone") {
chartProperties = {
type : 'column',
renderTo : 'container'
};
xAxisProp = {
gridLineWidth : 0,
categories : xAxisLegends,
crosshair : true
};
yAxisProp = {
min : 0,
gridLineWidth : 0,
tickAmount : 5,
title : {
text : ' '
},
labels : {
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
}
};
pointWidth = 5;
} else if (graphObj.osname == "android") {
chartProperties = {
type : 'column',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false,
height : 450,
marginTop : 100,
marginLeft : 120
},
xAxisProp = {
categories : xAxisLegends,
width : 800,
tickmarkPlacement : 'on',
labels : {
y : 40,
style : {
color : '#333333',
fontSize : '25',
fontFamily : 'Metropolis-Light',
opacity : '.6'
},
}
};
yAxisProp = {
gridLineWidth : 0,
min : 0,
tickAmount : 5,
offset : 60,
title : {
text : ''
},
labels : {
align : 'left',
style : {
color : '#333333',
fontSize : '28',
fontFamily : 'Metropolis-Light',
opacity : '.5'
},
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
},
};
pointWidth = 10;
if (parseInt(graphObj.osversion) >= 500 && parseInt(graphObj.osversion) <= 600) {
graphHeight = 600;
} else {
graphHeight = 630;
}
}
chart =
Highcharts.chart('container', {
chart : chartProperties,
credits : {
enabled : false
},
tooltip : {
enabled : false
},
exporting : {
enabled : false
},
title : {
text : ''
},
xAxis : xAxisProp,
yAxis : yAxisProp,
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0,
groupPadding : 0.38,
pointWidth : pointWidth
}
},
colors : columnColors,
series : seriesData
});
}
</script>
</head>
<body>
<div id="container" style="height: 100%; width: 100%; position : center;"></div>
</body>
The function that calls this chart :
$.webViewPerformanceGraph.url = "/html/Performance.html";
$.webViewPerformanceGraph.addEventListener('load', function() {
$.webViewPerformanceGraph.evalJS("renderGraph('" + JSON.stringify(params) + "');");
Since you're using jQuery, have you tried simply emptying the container div as follows before redrawing the chart?
$('#container').html();
Perhaps this would be more beneficial since chart.destroy() doesn't seem to be working in your case.
From http://api.jquery.com/html/#html2:
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
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.
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
So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add
tooltipTemplate: "<%= value %>% test"
to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains completely unchanged in reality. And ideas?
Thanks!
Here is an example of custom tooltip label:
var ctx = document.getElementById("myChart");
var barChartData = {
labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
datasets : [ {
type : 'bar',
label : "Revenue (US$)",
data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
backgroundColor : 'rgba(0, 0, 255, 0.3)'
} ]
};
var myChart = new Chart(ctx,
{
type : 'bar',
data : barChartData,
options : {
responsive : true,
tooltips : {
callbacks : { // HERE YOU CUSTOMIZE THE LABELS
title : function() {
return '***** My custom label title *****';
},
beforeLabel : function(tooltipItem, data) {
return 'Month ' + ': ' + tooltipItem.xLabel;
},
label : function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
},
afterLabel : function(tooltipItem, data) {
return '***** Test *****';
},
}
},
scales : {
xAxes : [ {
display : true,
labels : {
show : true,
}
} ],
yAxes : [ {
type : "linear",
display : true,
position : "left",
labels : { show : true },
ticks : {
beginAtZero : true
}
} ]
}
}
});
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.