Donut 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="donutChart_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
      <div id="donutChart_holder" style="flex-grow: 1; flex-shrink: 1;">
        <div id="donutChart_chart" style="width:100%; height:100%; position: relative;"></div>
      </div>
      <div id="donutChart_legend" style="min-width: 150px;"></div>
    </div>    
  </div>

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

// this is the data to be displayed
var dataOptions = {
  "series": [
    {
      "type": "pie",
      "label": {
        "show": false,
        "position": "center"
      },
      "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
        }
      ],
      "emphasis": {
        "label": {
          "show": true,
          "fontSize": 35,
          "fontWeight": 700,
          "formatter": "{d}%"
        }
      },
      "radius": [
        "80%",
        "95%"
      ]
    }
  ],
  "legend": {
    "data": [
      "Label 1",
      "Label 2",
      "Label 3",
      "Label 4",
      "Label 5",
      "Label 6",
      "Label 7"
    ]
  }
};   

///////////////////////////////////////////////////
// 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('donutChart_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, '#donutChart_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'donutChart_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());