Insites Docs Web Components V2Data DisplayCharts - Pie

Charts - Pie

Published on February 18, 2021, updated on June 01, 2021

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.