Pie chart with patterned slice fills
This demo shows how you can use completely custom pattern fills on a PieChart.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.PieChart);
// Add datachart.data = [ { country: "Lithuania", litres: 501.9, fill: "https://docs.amcharts.com/assets/pattern1.jpg" }, { country: "Czechia", litres: 301.9, fill: "https://docs.amcharts.com/assets/pattern2.jpg" }, { country: "Ireland", litres: 201.1, fill: "https://docs.amcharts.com/assets/pattern3.jpg" }, { country: "Germany", litres: 165.8, fill: "https://docs.amcharts.com/assets/pattern4.jpg" }];
// Add and configure Seriesvar pieSeries = chart.series.push(new am4charts.PieSeries());pieSeries.dataFields.value = "litres";pieSeries.dataFields.category = "country";pieSeries.slices.template.stroke = am4core.color("#fff");pieSeries.slices.template.strokeWidth = 3;
chart.legend = new am4charts.Legend();
pieSeries.events.on("datavalidated", function (ev) { ev.target.slices.each(function (slice) { // Create pattern var pattern = new am4core.Pattern(); pattern.width = 500; pattern.height = 750; pattern.x = -250; pattern.y = -375;
var image = new am4core.Image(); image.href = slice.dataItem.dataContext.fill; image.width = 500; image.height = 750; pattern.addElement(image.element);
slice.fill = pattern; });});<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 400px;}pie-chart-with-patterned-slice-fills