Danfo.js
  • Danfo.js Documentation
  • Getting Started
  • API reference
    • General Functions
      • danfo.tensorflow
      • danfo. convertFunctionTotransformer
      • danfo.streamCsvTransformer
      • danfo.streamJSON
      • danfo.streamCSV
      • danfo.Utils
      • danfo.Str
      • danfo.Dt
      • danfo.dateRange
      • danfo.OneHotEncoder
      • danfo.StandardScaler
      • danfo.MinMaxScaler
      • danfo.LabelEncoder
      • danfo.toDateTime
      • danfo.getDummies
      • danfo.concat
      • danfo.merge
    • Input/Output
      • danfo.readExcel
      • danfo.toExcel
      • danfo.readJSON
      • danfo.toJSON
      • danfo.readCSV
      • danfo.toCSV
    • Series
      • Creating a Series
      • Series.append
      • Series.cumSum
      • Series.cumMax
      • Series.cumProd
      • Series.cumMin
      • Series.str.split
      • Series.str.len
      • Series.str.join
      • Series.str.trim
      • Series.str.substring
      • Series.str.substr
      • Series.str.slice
      • Series.str.search
      • Series.str.repeat
      • Series.str.replace
      • Series.str.lastIndexOf
      • Series.str.indexOf
      • Series.str.includes
      • Series.str.endsWith
      • Series.str.startsWith
      • Series.str.concat
      • Series.str.charAt
      • Series.str.toUpperCase
      • Series.str.toLowerCase
      • Series.str.capitalize
      • Series.dt.seconds
      • Series.dt.minutes
      • Series.dt.dayOfMonth
      • Series.dt.monthName
      • Series.dt.hours
      • Series.dt.dayOfWeek
      • Series.dt.dayOfWeek
      • Series.dt.month
      • Series.dt.year
      • Series.argMax
      • Series.argMin
      • Series.argSort
      • Series.replace
      • Series.isNa
      • Series.fillNa
      • Series.dropNa
      • Series.dropDuplicates
      • Series.valueCounts
      • Series.nUnique
      • Series.unique
      • Series.abs
      • Series.ne
      • Series.eq
      • Series.ge
      • Series.le
      • Series.gt
      • Series.lt
      • Series.iloc
      • Series.loc
      • Series.at
      • Series.iat
      • Series.ndim
      • Series.shape
      • Series.dtype
      • Series.values
      • Series.tensor
      • Series.index
      • Series.apply
      • Series.map
      • Series.setIndex
      • Series.resetIndex
      • Series.describe
      • Series.copy
      • Series.sortValues
      • Series.var
      • Series.std
      • Series.round
      • Series.minimum
      • Series.maximum
      • Series.count
      • Series.sum
      • Series.max
      • Series.min
      • Series.mode
      • Series.median
      • Series.mean
      • Series.mod
      • Series.pow
      • Series.div
      • Series.mul
      • Series.sub
      • Series.add
      • Series.sample
      • Series.tail
      • Series.head
      • Series.and
      • Series.or
    • Dataframe
      • Creating a DataFrame
      • DataFrame.sortIndex
      • DataFrame.append
      • DataFrame.nUnique
      • DataFrame.tensor
      • DataFrame.print
      • DataFrame.toCSV
      • DataFrame.toJSON
      • DataFrame.toExcel
      • DataFrame.sortValues
      • DataFrame.setIndex
      • DataFrame.resetIndex
      • DataFrame.rename
      • DataFrame.drop
      • DataFrame.asType
      • DataFrame.shape
      • DataFrame.axis
      • DataFrame.ndim
      • DataFrame.values
      • DataFrame.selectDtypes
      • DataFrame.ctypes
      • DataFrame.index
      • DataFrame.loc
      • DataFrame.iloc
      • DataFrame.at
      • DataFrame.iat
      • DataFrame.head
      • DataFrame.tail
      • DataFrame.sample
      • DataFrame.add
      • DataFrame.sub
      • DataFrame.mul
      • DataFrame.div
      • DataFrame.pow
      • DataFrame.mod
      • DataFrame.mean
      • DataFrame.median
      • DataFrame.min
      • DataFrame.max
      • DataFrame.std
      • DataFrame.var
      • DataFrame.count
      • DataFrame.round
      • DataFrame.cumSum
      • DataFrame.cumMin
      • DataFrame.cumMax
      • DataFrame.cumProd
      • DataFrame.copy
      • DataFrame.describe
      • DataFrame.sum
      • DataFrame.abs
      • DataFrame.query
      • DataFrame.addColumn
      • DataFrame.groupby
      • DataFrame.column
      • DataFrame.fillNa
      • DataFrame.isNa
      • DataFrame.dropNa
      • DataFrame.apply
      • DataFrame.applyMap
      • DataFrame.It
      • DataFrame.gt
      • DataFrame.le
      • DataFrame.ge
      • DataFrame.ne
      • DataFrame.eq
      • DataFrame.replace
    • Configuration Options
    • Plotting
      • Timeseries Plots
      • Violin Plots
      • Box Plots
      • Tables
      • Pie Charts
      • Histograms
      • Scatter Plots
      • Bar Charts
      • Line Charts
      • Customizing your plots
    • Groupby
      • Groupby.getGroups
      • Groupby.col
      • Groupby.max
      • Groupby.min
      • Groupby.sum
      • Groupby.mean
      • Groupby.std
      • Groupby.var
      • Groupby.count
      • Groupby.cumSum
      • Groupby.cumMax
      • Groupby.cumMin
      • Groupby.cumProd
      • Groupby.agg
  • User Guides
    • Migrating to the stable version of Danfo.js
    • Using Danfojs in React
    • Titanic Survival Prediction using Danfo.js and Tensorflow.js
  • Building Data Driven Applications with Danfo.js - Book
  • Contributing Guide
  • Release Notes
Powered by GitBook
On this page
  • Examples
  • Pie Chart from Columns in a DataFrame
  • Multiple Pie Chart from Columns in a DataFrame
  • Configure Position of Pie Charts

Was this helpful?

  1. API reference
  2. Plotting

Pie Charts

Generate a pie plot.

A pie plot is a proportional representation of the numerical data in a column

Examples

Pie Chart from Columns in a DataFrame

import { useEffect } from 'react';
import './App.css';
import { DataFrame } from "danfojs-nightly";

function App() {

  useEffect(() => {
    const df = new DataFrame({
      Price: [19, 26, 55],
      Location: ["NG", "GH", "SA"],
      Type: ["Residential", "Non-Residential", "Utility"],
    });

    df.plot("plot_div").pie({ config: { values: "Price", labels: "Type" } });
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <div id="plot_div"></div>
      </header>
    </div>
  );
}

export default App;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/danfojs-nightly@1.0.2/lib/bundle.js"></script>

    <title>Document</title>
  </head>

  <body>
    <div id="plot_div"></div>

    <div id="plot_div"></div>
    <script>
      const df = new dfd.DataFrame({
        Price: [19, 26, 55],
        Location: ["NG", "GH", "SA"],
        Type: ["Residential", "Non-Residential", "Utility"],
      });

      df.plot("plot_div").pie({ config: { values: "Price", labels: "Type" } });
    </script>
  </body>
</html>
e

Multiple Pie Chart from Columns in a DataFrame

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
     <script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
    <title>Document</title>
</head>

<body>

    <div id="plot_div"></div>
    <script>

       const df = new dfd.DataFrame({
          Price: [19, 26, 55],
          Volume: [100, 200, 300],
          Location: ["NG", "GH", "SA"],
          Type: ["Residential", "Non-Residential", "Utility"],
        });
    
        df.plot("plot_div").pie({
          config: {
            labels: "Location",
            columns: ["Price", "Volume"],
            columnPositions: [0, 1],
          }
        });

    </script>
</body>

</html>

Configure Position of Pie Charts

If you have more than one pie chart to display, you can set the grid parameter, and also the position of each pie.

For example, in the snippet below, we set the grid to 2 by 2 and also pass a set of row and column index positions. Each row/column position index corresponds to each pie.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
    <title>Document</title>
</head>

<body>

    <div id="plot_div"></div>
    <script>

       df = new dfd.DataFrame({
            Price: [19, 26, 55],
            Count: [20, 50, 25],
            Type: ['Residential', 'Non-Residential', 'Utility']
        })

        df.plot("plot_div").pie({
          config: {
            labels: "Location",
            columns: ["Price", "Volume"],
            columnPositions: [0, 1],
            rowPositions: [0, 1],
            grid: { rows: 2, columns: 2 }
          }
        });

    </script>
</body>

</html>
PreviousTablesNextHistograms

Last updated 1 month ago

Was this helpful?

For more configuration options for Pie Charts, see the style doc.

Plotly