Charts - Pie

Last updated on August 02, 2024.

Element: <ins-pie-chart>

Defines a Pie Chart.

Complete Example

Code Snippet

<ins-card 
  steady
  tooltip="This is a sample tooltip content. It also support html content.">
  <ins-pie-chart
    id="pieChart"
    title="Viewers"
    legends="true"
    data-labels="false">
  </ins-pie-chart>

</ins-card>

<script>
  window.addEventListener('load', function () {
    var pieChartEl = document.getElementById('pieChart');
    var pieChartSample = [
      { name: 'Unboxing Videos', y: 10, sliced: true, selected: true },
      { name: 'Tag or Challenge Videos', y: 20 },
      { name: 'Comedy/Skit Videos', y: 30 },
      { name: 'Gaming Videos', y: 40 },
    ]
    pieChartEl.chartData = pieChartSample;
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
chart-data	array	[]	-	An array of data object. Data objects are consist of a name (string), y (number), sliced (boolean) and selected (boolean)
size	string	100%	Can be a percentage or pixels(px)	Defines the size of the pie chart
inner-size	string	0%	Can be a percentage or pixels(px)	Defines the hole inside the pie chart
colors	array of hex colors	[]	Hex Colors only	Defines the colors of the pies in the chart
data-labels	boolean	true	true / false	Enable/Disable pie labels in the chart
legends	boolean	true	true / false	Enable/Disable pie legends of the chart
title	string	"Pie Chart"	-	Defines title of chart
inner-title	boolean	false	true / false	Defines if the title should be inside or outside the chart
title-offset	number	0	Positive numbers will move the title Downward Negative numbers will move the title Upward	Defines the position of the title
start-angle	number	0	360 degree angle	Defines the start angle of the pie
end-angle	number	0	360 degree angle	Defines the end angle of the pie

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.