I am using highcharts for rendering pie chart,
when series data is small/less, dataLabels are overlapping.
Link to reproduced problem.
http://jsfiddle.net/venkatesh1453/nwg2rdze/1/
plotOptions: {
pie: {
dataLabels: {
distance : function(){
return (-30 - (this.series.index *3));
}
}
}
},
I tried this code, but it moves all labels to right-top corner.
Please provide solution/workaround for avoiding labels overlapping.
The easiest way is move data labels outside of pie chart.
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome browser', 1.1],
['Other browsers', 1.4]
]
}]
});
});
Example
Related
I have two bootstrap columns side by side in which I want to show two related Chart.js doughnut charts. I want to include the legends, so one can easily see the meaning without interactively hovering with the mouse.
The thing is, when Chart.js plots the two doughnut charts, the sizes of the actual charts differ, because the legend in one chart takes up more space comparatively.
What I'd like is to have two doughnut charts side by side, that scale responsively, and where I am certain the actual doughnut is the same size.
Link to jsfiddle here: https://jsfiddle.net/emc86oux/1/
var chart = new Chart('plot1', {
type: 'doughnut',
data: {
datasets: [{
data: [3,6,10,6,1],
}],
labels: ["Lorem","ipsum","dolor","sit","amet"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});
var chart = new Chart('plot2', {
type: 'doughnut',
data: {
datasets: [{
data: [6, 5, 9, 7, 8, 4, 1, 2, 3, 10, 5],
}],
labels: ["On", "the", "other", "hand", "we", "denounce", "with", "righteous", "indignation", "and", "dislike"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});
I ended up using the approach described here, where HTML legends are added in separate div's. I modified the approach for doughnut charts, which set up the chart data slightly differently than bar charts.
I have configured a chart to use connectNulls.
What I am expecting is that the chart will draw lines to and from the edges of the chart:
(x=0 and x=n)
How do I get the chart to draw lines from the left edge (for the missing data points) to the right edge.
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
title: {
text: 'Connect Nulls'
},
plotOptions: {
series: {
connectNulls: true,
}
},
series: [
{
type: 'line',
name: data()[0][0],
data: data()[0][1]
},
}
http://jsfiddle.net/0qzrbnks/
edit
I have added a null value to series D0806, and it's still not connecting it?
I'm drawing a graph to show how many people completed our app and how many people failed going through all the steps. To do this my company has decided to use the library d3 to show the charts. However, on the pie chart they want a whole number to show instead of the default percentage and I can't seem to find any documentation on this.
My code for this looks like this
c3.generate({
bindto: '.pieChart',
data: {
columns: [
['Started', Started],
['Completed', Completed]
],
type: 'pie'
}
});
Any help would be appreciated!
The documentation is pretty clear.
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 50]
],
type: 'pie'
},
pie: {
label: {
format: function(value, ratio, id) {
return value;
}
}
}
});
Example here.
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});