jQuery PieChart - Rearrange Legend Items

Although the legend's layout is virtually universal, in some cases, you may need to slightly adjust it, for example, rearrange legend items. You can learn how to do it from the following instructions.

• Choose legend orientation
  Depending on whether the legend is oriented vertically or horizontally, the PieChart arranges legend items in columns or in rows. To change the legend orientation, use the orientation property.

  jQuery

  JavaScript

  $(function() {
      $("#pieChartContainer").dxPieChart({
          // ...
          legend: {
              orientation: "vertical" // or "horizontal"
          }
      });
  });

  Angular

  HTML

  TypeScript

  <dx-pie-chart ...>
      <dxo-legend
          orientation="vertical"> <!-- or "horizontal" -->
      </dxo-legend>
  </dx-pie-chart>

  import { DxPieChartModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      // ...
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ... >
          <DxLegend orientation="vertical"/> <!-- or "horizontal" -->
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart, {
      DxLegend
  } from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart,
          DxLegend
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import PieChart, {
      Legend
  } from 'devextreme-react/pie-chart';
  
  class App extends React.Component {
      render() {
          return (
              <PieChart ... >
                  <Legend orientation="vertical" /> {/* or "horizontal" */}
              </PieChart>
          );
      }
  }

  NOTE

  To center a horizontally-oriented legend, assign "center" to the horizontalAlignment property. For details on the legend's location, refer to the Relocate the Legend topic.

• Set the number of columns or rows
  To distribute all legend items between several columns (in a vertically-oriented legend) or rows (in a horizontally-oriented legend), set the columnCount or rowCount property respectively.

  jQuery

  JavaScript

  $(function() {
      $("#pieChartContainer").dxPieChart({
          // ...
          legend: {
              // ...
              columnCount: 3
              // rowCount: 2
          }
      });
  });

  Angular

  HTML

  TypeScript

  <dx-pie-chart ...>
      <dxo-legend ...
          [columnCount]="3">
          <!-- [rowCount]="2"> -->
      </dxo-legend>
  </dx-pie-chart>

  import { DxPieChartModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      // ...
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ... >
          <DxLegend ...
              :column-count="3"
              <!-- :row-count="2" -->
          />
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart, {
      DxLegend
  } from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart,
          DxLegend
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import PieChart, {
      Legend
  } from 'devextreme-react/pie-chart';
  
  class App extends React.Component {
      render() {
          return (
              <PieChart ... >
                  <Legend
                      columnCount={3}
                      {/* rowCount={2} */}
                  />
              </PieChart>
          );
      }
  }

• Adjust the empty space between columns and rows
  Regardless the legend orientation, you can adjust the empty space between columns and rows using the columnItemSpacing and rowItemSpacing properties respectively.

  jQuery

  JavaScript

  $(function() {
      $("#pieChartContainer").dxPieChart({
          // ...
          legend: {
              // ...
              columnItemSpacing: 20,
              rowItemSpacing: 30
          }
      });
  });

  Angular

  HTML

  TypeScript

  <dx-pie-chart ...>
      <dxo-legend ...
          [columnItemSpacing]="20"
          [rowItemSpacing]="30">
      </dxo-legend>
  </dx-pie-chart>

  import { DxPieChartModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      // ...
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ... >
          <DxLegend ...
              :column-item-spacing="20"
              :row-item-spacing="30"
          />
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart, {
      DxLegend
  } from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart,
          DxLegend
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import PieChart, {
      Legend
  } from 'devextreme-react/pie-chart';
  
  class App extends React.Component {
      render() {
          return (
              <PieChart ... >
                  <Legend
                      columnItemSpacing={20}
                      rowItemSpacing={30}
                  />
              </PieChart>
          );
      }
  }

Below, you can try out all the mentioned properties in action.

See Also

• Relocate the Legend
• PieChart Demos