Skip to content

Commit

Permalink
add css code chunks
Browse files Browse the repository at this point in the history
  • Loading branch information
rachelmarconi committed Aug 8, 2024
1 parent 3c94101 commit 9786b03
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 0 deletions.
34 changes: 34 additions & 0 deletions src/lib/Layercake/AxisX.docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,40 @@ Furthermore, while Layercake components are often externally updated, this axis

Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart.

## Want to update axis style straight from the Layercake repo?
Use this css instead:

```js
<style>
.tick {
font-size: 12px;
font-weight: 400;
font-family: var(--font-family-sans-serif);
}
line,
.tick line {
stroke: #DEDDDD;
}
.tick text {
fill: #000000;
}
.tick .tick-mark,
.baseline {
stroke: #000000;
}
/* This looks slightly better */
.axis.snapTicks .tick:last-child text {
transform: translateX(3px);
}
.axis.snapTicks .tick.tick-0 text {
transform: translateX(-3px);
}
.axis-label {
font-size: 12px;
}
</style>
```


```js
import { AxisX } from "@urbaninstitute/dataviz-components";
Expand Down
18 changes: 18 additions & 0 deletions src/lib/Layercake/AxisY.docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,24 @@ Furthermore, while Layercake components are often externally updated, this axis

Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart.

## Want to update axis style straight from the Layercake repo?
Use this css instead:
```js
<style>
.tick, .axis-label {
font-size: 12px;
font-family: var(--font-family-sans-serif);
}

.tick line {
stroke: #dedddd;
}
.tick:first-of-type line {
stroke: #000000;
}
</style>
```


```js
import { AxisY } from "@urbaninstitute/dataviz-components";
Expand Down

0 comments on commit 9786b03

Please sign in to comment.