plotly-next v0.1.1

plotly-next

A Plotly.js wrapper built for Next.js, App Router & TypeScript.

Table of contents

• Requirements
• Install
• Usage

Requirements

• Next.js 13+

Install

npm i plotly-next

Usage

Simply import the component wherever you need:

"use client";

import Plotly from "plotly-next";

export default function HomePage() {
  return (
    <Plotly
      useResizeHandler
      style={{ width: "100%", height: "100%" }}
      config={{
        scrollZoom: true,
        displaylogo: false,
        modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d"],
      }}
      layout={{
        dragmode: "pan",
        uirevision: "true",
        xaxis: {
          tickmode: "linear",
          ticks: "outside",
          title: {
            standoff: 30,
            text: "Candidate",
          },
        },
        yaxis: {
          rangemode: "tozero",
          ticks: "outside",
          title: {
            standoff: 30,
            text: "Number",
          },
        },
      }}
      data={[
        {
          type: "bar",
          x: ["LOCKE", "REYES", "FORD", "JARRAH", "SHEPHARD", "KWON"],
          y: [4, 8, 15, 16, 23, 42],
        },
      ]}
    />
  );
}