Customizing your plots

Getting Started API Reference Contributing Guide Github
Search…
Danfo.js currently supports Plotly.js for plotting. This means you have all the configuration, flexibility, and interactiveness of Plotly.
All customization on the plot can be passed in the config and layout parameter.
Config Parameter
The config parameter extends the Plotly.js config type. That is, all properties available to the Plotly config argument, are available. Alongside those arguments, Danfo.js uses some custom arguments which we list below:
Argument
Description
Default value
x
Column name to plot on the x-axis.
DataFrame index if required
y
Column name to plot on the y-axis.
DataFrame index if required
columns
Array of column names to plot.
All columns in the DataFrame when applicable
values
Used to configure a pie chart. A column name containing values for the pie. Maps 1-1 with labels.
​
labels
Used to configure a pie chart. A column name containing labels for the pie. Maps 1-1 with values.
​
rowPositions
Used to configure a pie chart. Pie chart domain row. See https://plotly.com/javascript/reference/pie/#pie-domain-row​
Range of 0 - DataFrame column length
columnPositions
Used to configure a pie chart. Pie chart domain column. See https://plotly.com/javascript/reference/pie/#pie-domain-column​
Range of 0 - DataFrame column length
grid
Used to configure a pie chart. Accepts the following parameter:

row: Integer size
column: Integer size
​
tableHeaderStyle
Table properties used for configuring table header. See full list of supported arguments.
​
tableCellStyle
Table properties used for configuring table cells. See full list of supported arguments
​
Layout Parameter
The layout argument object is used to configure the overall display of a chart. See the full list of supported arguments​
In the following example, we show how to set some basic configuration as well as layout for a line plot.
React
Browser
1
import { useEffect } from 'react';
2
import './App.css';
3
import { readCSV } from "danfojs-nightly";
4
​
5
function App() {
6
​
7
  useEffect(() => {
8
​
9
    readCSV("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
10
      .then(df => {
11
​
12
        const layout = {
13
          title: {
14
            text: "Time series plot of AAPL open and close points",
15
            x: 0
16
          },
17
          legend: {
18
            bgcolor: "#fcba03",
19
            bordercolor: "#444",
20
            borderwidth: 1,
21
            font: { family: "Arial", size: 10, color: "#fff" }
22
          },
23
          width: 1000,
24
          yaxis: {
25
            title: 'AAPL open points',
26
          },
27
          xaxis: {
28
            title: 'Date',
29
          },
30
        }
31
​
32
        const config = {
33
          columns: ["AAPL.Open", "AAPL.Close"], //columns to plot
34
          displayModeBar: true,
35
          displaylogo: false,
36
        }
37
        df.plot("plot_div").line({ layout, config })
38
      })
39
  }, [])
40
​
41
  return (
42
    <div className="App">
43
      <header className="App-header">
44
        <div id="plot_div"></div>
45
      </header>
46
    </div>
47
  );
48
}
49
​
50
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
    <title>Document</title>
8
  </head>
9
​
10
  <body>
11
    <div id="plot_div"></div>
12
​
13
    <script>
14
      dfd
15
        .readCSV(
16
          "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
17
        )
18
        .then((df) => {
19
          const layout = {
20
            title: {
21
              text: "Time series plot of AAPL open and close points",
22
              x: 0,
23
            },
24
            legend: {
25
              bgcolor: "#fcba03",
26
              bordercolor: "#444",
27
              borderwidth: 1,
28
              font: { family: "Arial", size: 10, color: "#fff" },
29
            },
30
            width: 1000,
31
            yaxis: {
32
              title: "AAPL open points",
33
            },
34
            xaxis: {
35
              title: "Date",
36
            },
37
          };
38
​
39
          const config = {
40
            columns: ["AAPL.Open", "AAPL.Close"], //columns to plot
41
            displayModeBar: true,
42
            displaylogo: false,
43
          };
44
          df.plot("plot_div").line({ layout, config });
45
        });
46
    </script>
47
  </body>
48
</html>
Copied!
​
Line Charts
Groupby
Last modified 5mo ago
Copy link
Contents
Config Parameter
Layout Parameter
Config Parameter

Layout Parameter

​
