search

Quartz / Chartbuilder

A front-end charting application that facilitates easy creation of simple beautiful charts
http://quartz.github.io/Chartbuilder
MIT License
2.1k stars 354 forks source link

Make background color configurable #175

Closed jarib closed 9 years ago

jarib commented 9 years ago

Would be great if users could set the background color of the chart through the UI.

yanofsky commented 9 years ago

I would be open to this being rolled into a chart theming feature, but I'm hesitant to allow arbitrary background color changes.

Why does an end user need to change the background color?

This could also be achieved by customizing the styles on the chart sizes. e.g. a gray background if "spot chart" is selected

jarib commented 9 years ago

It doesn't need to be arbitrary colors, we could use the same palette as currently exists for line/columns/dots, or a separate restricted pallette for background colors.

A user may want to customize the background color for the same reason they want to customize any other color - to make it fit visually with their brand / context. E.g. in the news outlet I work for, we have a different background color for the sports section. It would be nice for them to create charts that doesn't looks different from everything else in their section.

If there's a theming feature planned, that may very well solve this problem.

yanofsky commented 9 years ago

sorry for the slow reply on this.

I think the best thing for us to do would be to create some sort of theming eg. Sports Section themed, or Opinion themed, etc.

In the meantime you could create a light version of this by styling by chart size. eg. Create "Sports-Spot" "Sports-Medium" "Opinion-Spot" "Opinion-Medium" options and styling the css appropriately by targeting that selector

fdaudens commented 8 years ago

Hi,

Sorry to open this issue again, but I would like to try this solution, but I'm not sure which file I should edit. For example, if I want a background in blue for the smallSpot. Could you help me? Thanks in advance!

yanofsky commented 8 years ago

Hi @fdaudens, no worries, you could add a style definition like this

.small
    rect.svg-background, .d4 .axis .tick rect
        fill midnightblue

here https://github.com/Quartz/Chartbuilder/blob/a360c4b933e9020669131e332e0426440447d8f8/src/styl/chart-renderer.styl#L188-L197

or make your customizations in a separate file and @import them in src/styl/main.styl

fdaudens commented 8 years ago

Thank you for your reply @yanofsky ! I've tried this solution, but it doesn't seem to work with the small size. 


.small
    rect.svg-background, .d4 .axis .tick rect
        fill midnightblue
  .em-size
    font-size $em_size_small
  .d4
    font-size $em_size_small

However, when I try with the medium size, it works (but it becomes blue for every size). 

.medium
    rect.svg-background, .d4 .axis .tick rect
        fill midnightblue
  .em-size
    font-size $em_size
  .d4
    font-size $em_size

Any idea why?