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?

Send your suggestions using this form.