Develop Reference

Highcharts label at absolute top left?

How can I position my custom label at the VERY TOP LEFT of the chart?
I tried doing this:
labels: {
items: [{
html: 'Testing Custom Label',
style: {
left: '0px',
top: '0px',
color: 'red'
}
}],
style: {
position: 'absolute'
}
}
but it doesn't take the yaxis / title into consideration. Is there a way to do this which will work for ANY chart instead of me hardcoding some negative values for top/left (which will only work for this particular chart) ?
http://jsfiddle.net/itsVicc/xu9nL8cn/

You can use renderer to generate the label instead of doing this via chart constructor options. The label will be positioned using the whole chart (not plot area) as baseline.
chart: {
events: {
load: function() {
this.renderer.label('test label', 0, 0).add();
}
}
},
Live demo: http://jsfiddle.net/kkulig/ns3rh6rx/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Rotate X-Axis Labels for d3 area_series chart in Rubix - ReactJs Powered Admin Template

I am using Rubix - ReactJs Powered Admin Template for the project development. Also, I am using d3.js to render various charts. As the labels on x-axis are horizontally aligned they are merging into each other.
Here is my code snippet to create a area_series chart:
var chart = new Rubix('#slcnm', {
width: '100%',
height: 200,
title: 'Data Load Frequency',
subtitle: 'no markers',
titleColor: '#0054A9',
subtitleColor: '#0054A9',
axis: {
x: {
type: 'datetime',
tickFormat: '%d-%b-%Y'
}
},
tooltip: {
color: '#0054A9',
format: {
x: '.0f',
y: '.0f'
}
}
});
var area = chart.area_series({
name: 'Marketing Automation',
color: '#804000',
marker: 'circle'
});
Which property should I use to rotate the labels on x-axis are they will be more presentable when the chart is rendered.

maintain constant space between bars irrespective of number of bars google bar chart

I am using google bar chart and using following code.
var options = {
backgroundColor:'',
title: '',
chartArea: {width: '100%'},
bar: { groupWidth:15},
colors: ['#fff', '#fff'],
hAxis: {
title: '',
minValue: 0,
gridlines: {
color: '#fff'
},
baselineColor:'#fff',
textStyle:{
color:"#000"
}
},
legend: { position: 'none' },
vAxis: {
title: '',
textPosition:'none'
}
};
I am getting following output
First case:when number of bars are more.
Second case: when number of bars are less.
Third case: when there is only one bar, it is showing in center. I want to start bar from bottom means near x-axis. Following you can see screen shot.
I want to show constant space between 2 bars irrespective of number of bars.
any advice or suggestion in this case?

Configuring Pie chart to use minimum space and never hide labels

I'm trying to configure the pie chart to use the minimum space possible.
I have set the fixed diameter (to the circle, not to the container) so that i can compare two charts.
Did not set the fixed width and height (to the container) as it can hide the labels (Labels are dynamic. Sometimes they can be long. And they are of different length for each chart.)
Here is the jsfiddle.
Please note that there are two charts one below the other.
Here is my code:
$(function ()
{
draw('container1');
draw('container2');
function draw(id)
{
$('#' + id).highcharts(
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title:{ text: null },
legend: { enabled: false },
credits: { enabled: false },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
size: 100,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [/* data */]
});
}
});
Current issues:
There is some unused space around the chart (gray colored).
Right hand side some part of the label is hidden even though there is space available on the left side.
Edit 1: From the api docs it seem to use default height 400px and width 600px, if not set on the container element. Is there any way to instruct it to use the minimum required width and height?

Reason for 2: size of the pie chart, you wouldn't see it if you increase the size.
Reason for 3: highcharts does not automatically recenter the chart if you set the size of the chart, and the center of the chart would be center of the div, which leads to cutting off the labels.
If you don't set the size, highcharts would recenter the chart to accomodate all the labels in the plot area.
Try using minSize instead of size.

How to get rounded corner in c3js bar charts

Looks like none of the d3 based charting libraries like nvd3, c3js support rounded corner for bar charts.
I need bars in the bar charts to look like as shown below, with gradient and rounded corners for my project.
Any hack or config to achieve this in c3js?

Need to override c3js function generateDrawBar and provide logic to get rounded corner, generally c3js path element consists of four points corresponding to four corners of the bar.
Now you need to provide logic to have multiple points at the top-left and top-right corners of the par to smoothen the bar corners.
There are still several cases:-
1) rounded corners for stacked bar charts.
2) rounded corners for negative values, bars pointing downwards or opposite direction.
rounded corner bars jsFiddle
rounded corner c3js bar charts snapshot
var chart = c3.generate({
bindto: '#chart',
padding: {
left: 200,
right: 100,
top: 20,
bottom: 20
},
data: {
x: 'x',
labels: true,
columns: [
['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'category',
tick:{
multiline: false
}
}
},
legend: {
show: false
},
tooltip: {
show: false
},
bar: {
width: {
ratio: .7
},
spacing: 2
}
});