c3js / c3js/c3

Default styles break textures.js

Open
#2,537 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

* **C3 version**: current master
* **D3 version**: n/a
* **Browser**: n/a
* **OS**: n/a

The [default styles for .c3 path and .c3 line](https://github.com/c3js/c3/blob/master/src/scss/chart.scss#L5) are very broad and affect patterns defined within the `defs` when they probably shouldn't. This breaks [textures.js](https://riccardoscalco.it/textures/), which generates patterns using appropriate fill and strokes with presentation attributes (presumably to allow easier styling), requiring additional double handling CSS to then override C3 to bring it back to the original styles.

Is it possible to have this rule be more appropriately targeted so that it doesn't mess with paths and lines in `defs`?

[This fiddle](https://jsfiddle.net/qyd8weo0/2/) shows the problem; the first bar should look like this

![image](https://user-images.githubusercontent.com/407806/49267825-64f50200-f4b0-11e8-8793-53b29574e25e.png)

but instead looks like the bars on this

![image](https://user-images.githubusercontent.com/407806/49268206-45f76f80-f4b2-11e8-904e-f3be9c360b9c.png)

Applying an ID and some additional CSS [in this fiddle](https://jsfiddle.net/qn592ay6/) brings it back to the right look, but then we're back to a scattered mess of styles split between JS and CSS again.

![image](https://user-images.githubusercontent.com/407806/49268163-0761b500-f4b2-11e8-9466-1e1e478db1fa.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.