1.0.115 • Published 2 years ago

jaropis-scatterplot-d3 v1.0.115

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

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

1.0.107

2 years ago

1.0.106

2 years ago

1.0.108

2 years ago

1.0.105

2 years ago

1.0.110

2 years ago

1.0.112

2 years ago

1.0.111

2 years ago

1.0.114

2 years ago

1.0.113

2 years ago

1.0.115

2 years ago

1.0.103

2 years ago

1.0.104

2 years ago

1.0.101

2 years ago

1.0.100

2 years ago

1.0.102

2 years ago

1.0.99

2 years ago

1.0.91

2 years ago

1.0.95

2 years ago

1.0.94

2 years ago

1.0.93

2 years ago

1.0.92

2 years ago

1.0.98

2 years ago

1.0.97

2 years ago

1.0.96

2 years ago

1.0.76

2 years ago

1.0.88

2 years ago

1.0.87

2 years ago

1.0.89

2 years ago

1.0.90

2 years ago

1.0.77

2 years ago

1.0.75

2 years ago

1.0.74

2 years ago

1.0.79

2 years ago

1.0.78

2 years ago

1.0.80

2 years ago

1.0.84

2 years ago

1.0.83

2 years ago

1.0.82

2 years ago

1.0.81

2 years ago

1.0.86

2 years ago

1.0.85

2 years ago

1.0.69

2 years ago

1.0.68

2 years ago

1.0.67

2 years ago

1.0.73

2 years ago

1.0.72

2 years ago

1.0.71

2 years ago

1.0.70

2 years ago

1.0.66

2 years ago

1.0.62

2 years ago

1.0.65

2 years ago

1.0.64

2 years ago

1.0.63

2 years ago

1.0.61

2 years ago

1.0.60

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.57

2 years ago

1.0.56

2 years ago

1.0.51

2 years ago

1.0.55

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.49

2 years ago

1.0.50

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.29

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.2

2 years ago

1.0.16

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago