jaropis-scatterplot-d3 v1.0.115

Custom Styling

To apply custom styles to the scatter plot, you can create a CSS file in your project and define styles for your specified class name.

Step 1: Create a CSS File

Create a CSS file (e.g., ScatterPlotStyles.css) in your project.

Step 2: Define Your Styles

In ScatterPlotStyles.css, define the styles for your scatter plot. For example:

.myCustomScatterPlot .axis-label { // use .default-scatterplot-style class to style all scatterplots in the same way
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* If you want different styles for x and y labels, you can use these separate classes
.myCustomScatterPlot .x-axis-label {
  //X-axis specific styles
} */
/*
.myCustomScatterPlot .y-axis-label {
  // Y-axis specific styles
}
*/

  /* Add more styles as needed */
}

Step 3: Import the CSS File in Your App

Import your CSS file in your application to apply the styles globally.

import React from "react";
import "./ScatterPlotStyles.css";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

Complete example:

see src/stories/styles/ScatterPlotStory.css for a complete example and template