I am looking to create a donut chart where instead of the pieces of the pie showing the percentage of the total, i'd like it to highlight the label/legend for each element?
I have tried using the formatter function e.g.
formatter: function(value, { seriesIndex, dataPointIndex, w }) {
return w.config.series[seriesIndex].name + ": " + value.toFixed(0)+ " %"
},
But this generates labels on each of the donut segments - undefined: 26 %
Would appreciate any thoughts on how to do this.
Many thanks,
Nigel
For donut charts, the labels are stored separately from the data value (i.e. series).
When creating the chart you'll pass these values:
options = {
series: [44, 55, 13, 33],
labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}
Or if using React/Vue:
series: [44, 55, 13, 33],
chartOptions: {
labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}
(Both examples from the documentation, with slight modification.)
This means that to access the labels in the formatter function, we need to reference labels instead of series. We can also drop the .name.
formatter: function(value, { seriesIndex, dataPointIndex, w }) {
return w.config.labels[seriesIndex] + ": " + value.toFixed(0)+ " %"
},
Related
I am using jqplot.PieRenderer and need my percentages to round to 2 decimal places. I have formatted the text labels to include a percentage for ADA Compliance, so the users are not solely relying on colors in the legend matching the percentages. However, my bar chart is rounding to a whole number.
Currently the code is:
$(document).ready(function(){
var data = [ OMMITTED_PII_IN_CODE ];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: {
show:true,
location: 's',
border: '0px',
fontSize: '12px',
// Breaks the ledgend into horizontal.
rendererOptions: {
numberRows: '4',
numberColumns: '3'
}
}
,
series: [{color:"#000000"}],
seriesColors: ["#d1ded4","#b8c8bb","#7a9f83","#F4D03F","#337ab7","#ccc","#fcf8e3","#f2dede"],
title: {
text: 'WVSOM Contributions Breakdown'
}
}
); // end plot chart
}); // end document ready
You can use the dataLabelFormatString to specify the format you want the labels in the segments to be. If you define the following within rendererOptions it will display to 2 decimal places:
dataLabelFormatString: '%#.2f%'
%#.2f tells it to display to 2 decimal places, and the % at the end will display a percent symbol after the number.
You will end up with something like this:
Please see this Fiddle for a working example
I have a C3 chart,
I would like to add a label on each point reading its y value with a percentage symbol appended to it.
e.g. 400%.
There is a solution for bar charts
labels: {
format: {
y: d3.format("$,")
//y: function (v, id) { return "Custom Format: " + id; }
}
But this doesn't work for line graphs.
There is also good answer on custom labels for bar charts, however, this doesn't seem to transfer to line charts.
There is this good answer on custom tooltips, but I can't work out how to do custom labels in a line graph.
Attempt: http://jsfiddle.net/7kYJu/6547/
Also, for some reason using % will prevent the graph from appearing, whereas $ will work, e.g
y: d3.format("$,")
Try This
`var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line',
labels: {
format: {
data1: d3.format("$,")
//data1: function (v, id) { return "Custom Format: " + id; }
}
}
}
});`
it should be the data array and not the axis to be mentioned as key in format object
I have created Pie chart and it is working ok. In Pie Chart, Labels are showing % values and it is also fine. But now I just want to show % value in Legend item text also.
var ChartDesignCreated = c3.generate({
bindto: "#Chart1",
data: {
columns: [
['Football', 10)],
['Cricket', 10)],
],
type: 'pie'
}
});
Legend item text should be display like :
Football = 50%
Cricket = 50%
Is it possible?
Thanks.
There are no built-in way to do that.
However, you can just put percentage into data label texts before chart rendering:
var columns = [
['data1', 30],
['data2', 120]
];
var total = columns.reduce(function(sum, item) {
return sum + item[1]
}, 0);
columns = columns.map(function(item) {
return [
item[0] + ' = ' + d3.format('.1%')(item[1] / total),
item[1]
]
});
var chart = c3.generate({
data: {
columns: columns,
type : 'pie'
}
});
https://jsfiddle.net/Dimmy/y2LLftx0/2/
I am using Highcharts - Line - Ajax.
Let's say I have two series of data - 'Headcount 1' and 'Headcount 2'. I want to draw a line graph of 'Headcount', which is the sum of the 2 series. However, when someone hovers on one data point, I want to show the individual values in the callout. Is this possible? How can I do this?
e.g.
H1 = (1, 2, 3)
H2 = (5, 6, 7)
Ht = (6, 8, 10)
I will draw a line graph with Ht. If I hover on '6' on the chart, the callout should show the values of H1 = 1 and H2 = 5
You can set the visibility for series H1 and H2 to false,
series: [{
name: 'H1',
data: [1, 2, 3],
visible: false,
showInLegend: false
}, {
name: 'H2',
data: [5, 6, 7],
visible: false,
showInLegend: false
}, {
name: 'H',
data: [6, 8, 10]
}]
and edit tooltip formatter to display what you want
tooltip: {
formatter: function() {
var s = '<b>' + this.x + '</b>';
var chart = this.points[0].series.chart; //get the chart object
var categories = chart.xAxis[0].categories; //get the categories array
var index = 0;
while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays
$.each(chart.series, function(i, series) { //loop through series array
if (series.name !== 'H') {
s += '<br/>'+ series.name +': ' +
series.data[index].y +'m'; //use index to get the y value
}
});
return s;
},
shared: true
}
Have a look at jsfiddle.net/s190ebby/27/
Yes
Points can have custom property, taking care that the names do not shadow highcharts variable names.
var data = [{
y: 6,
h1Value: 1,
h2Value: 5
},{
y: 8,
h1Value: 2,
h2Value: 6
}];
Set your series to this data in your config object, by series: data
Customise the tooltip as:
tooltip: {
pointFormat: '<b>H Value</b>: {point.y}<br/>
<b>H1 Value</b>: {point.h1Value}<br/>
<b>H2 Value</b>: {point.h2Value}'
}
I have a c3js line graph of type timeseries.
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
and it want it to be
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated!
UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.
HTML (Include the d3.js, c3.js, and c3.css scripts too)
<body>
<div id="chartContainer"></div>
</body>
JS
var chart = c3.generate({
bindto: '#chartContainer',
data: {
x: 'x',
columns: [
['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if((x.getMonth()+1) % 6 === 0) {
return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
}
}
}
}
},
tooltip: {
format: {
title: function (d) {
var format = d3.time.format('%m/%y');
return format(d)
}
}
}
});
N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.