pie-chart

jfreechart customize piechart to show absolute values and percentages

by

Use the MessageFormat symbol {1} for the absolute section value. See StandardPieSectionLabelGenerator for details. public class MyMinimalPieChartExample { private static final String KEY1 = “Datum 1”; public static final String KEY2 = “Datum 2”; public static void main(String[] args) { DefaultPieDataset dataset = new DefaultPieDataset(); dataset.setValue(KEY1, 99); dataset.setValue(KEY2, 77); JFreeChart someChart = ChartFactory.createPieChart( “Header”, dataset, … Read more

How do I use matplotlib autopct?

by

autopct enables you to display the percent value using Python string formatting. For example, if autopct=”%.2f”, then for each pie wedge, the format string is ‘%.2f’ and the numerical percent value for that wedge is pct, so the wedge label is set to the string ‘%.2f’%pct. import matplotlib.pyplot as plt plt.figure() values = [3, 12, … Read more

Label outside arc (Pie chart) d3.js

by

I can solve that problem – with trigonometry :). See fiddle: http://jsfiddle.net/nrabinowitz/GQDUS/ Basically, calling arc.centroid(d) returns an [x,y] array. You can use the Pythagorean Theorem to calculate the hypotenuse, which is the length of the line from the center of the pie to the arc centroid. Then you can use the calculations x/h * desiredLabelRadius … Read more

Chart.js v2: How to make tooltips always appear on pie chart?

by

Solution for ChartJs Version > 2.1.5: Chart.pluginService.register({ beforeRender: function (chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can’t use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function (dataset, i) { chart.getDatasetMeta(i).data.forEach(function (sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: … Read more

Percent pie chart with css only

by

New answer 2021 With some modern techniques we can improve the code. You can have rounded edges and also consider animation: @property –p{ syntax: ‘<number>’; inherits: true; initial-value: 1; } .pie { –p:20; /* the percentage */ –b:22px; /* the thickness */ –c:darkred; /* the color */ –w:150px; /* the size*/ width:var(–w); aspect-ratio:1/1; position:relative; display:inline-grid; … Read more

ggplot, facet, piechart: placing text in the middle of pie chart slices

by

NEW ANSWER: With the introduction of ggplot2 v2.2.0, position_stack() can be used to position the labels without the need to calculate a position variable first. The following code will give you the same result as the old answer: ggplot(data = dat, aes(x = “”, y = Cnt, fill = Volume)) + geom_bar(stat = “identity”) + … Read more

CSS Only Pie Chart – How to add spacing/padding between slices?

by

First I would recreate this with less of code relying on clip-path like below: .palette { height: 200px; width: 200px; position:relative; overflow:hidden; } .palette > * { position:absolute; top:0; left:0; right:0; bottom:0; border:50px solid var(–c,red); border-radius:50%; clip-path:polygon(50% 50%, 50% 0%, 100% 0%,100% 33.745%); } .color1 { transform:rotate(72deg); –c:blue; } .color2 { transform:rotate(144deg); –c:orange; } .color3 … Read more

tech