Pie charts example

  <div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
    <div class="chart_title">
      <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
      <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
    </div>
    <div id="pieChart_holder" style="flex-grow: 1; flex-shrink: 1;">
      <div id="pieChart_chart" style="width:100%; height:100%; position: relative;"></div>
    </div>
    <div id="pieChart_legend"></div>
  </div>

///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////

// this is the data to be displayed
var dataOptions = {
  "legend": {
    "orient": "vertical",
    "right": "10",
    "top": "10"
  },
  "series": [
    {
      "type": "pie",
      "label": {
        "show": false,
        "position": "outside"
      },
      "labelLine": {
        "show": false
      },
      "data": [
        {
          "name": "Label 1",
          "value": 25
        },
        {
          "name": "Label 2",
          "value": 50
        },
        {
          "name": "Label 3",
          "value": 75
        },
        {
          "name": "Label 4",
          "value": 10
        },
        {
          "name": "Label 5",
          "value": 100
        },
        {
          "name": "Label 6",
          "value": 30
        },
        {
          "name": "Label 7",
          "value": 5
        }
      ],
      "radius": [
        "0%",
        "95%"
      ]
    }
  ]
};   

///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
  mode: ODSCharts.ODSChartsMode.LIGHT,
  categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT,
  visualMapColor:  ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
  lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
  cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});

// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);

// get the chart holder and initiate it with the generated theme
var div = document.getElementById('pieChart_chart');
var myChart = echarts.init(div, themeManager.name, {
  renderer: 'svg',
});

// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#pieChart_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'pieChart_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
    enabled: true,
    shared: false,
    tooltip: true,
    axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
  }, 
  ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());