Skip to content
yanofsky edited this page Sep 13, 2013 · 3 revisions

##Configuring

Styling

Gneisschart uses CSS style sheets to modify the appearance of most chart elements. These are the elements and classes that exist to be styled. They are all svg elements and will therefore require svg specific attributes at times.

Layout elements

#####ground The background shape. Set fill:none; For a chart to be transparent. Default is { fill: #fff; stroke: none;} ####.legendItem text The text shown in the legend. Default is {font-family: 'Cutive',Helvetica, sans-serif; font-size: 12px;} #####titleLine The text shown in the title. Default is: {font-family: 'Cutive',Helvetica, sans-serif; font-size: 12px; fill: #666666;} ####text.metaText This is the text at the bottom of the chart. It includes the source line and the data line. Default is {font-family: 'Cutive',Helvetica, sans-serif; font-size: 10px; text-rendering: optimizeLegibility; fill: #999999;}

Axes

All of the D3 axis elements are given the class .axis. This includes #xAxis, and .yAxis. .yAxis includes #leftAxis and #rightAxis ####.axis line ####.axis path ####.axis text The text on an axis. The default is {font-family: 'Cutive',Helvetica, sans-serif; font-size: 12px;} ####.axis g.zero line The tick group for a tick value of zero on an axis. To make this line look the same as the rest leave blank. The default is {stroke: #666666;} #####xAxis line The default is {stroke: #e6e6e6;} #####xAxis The default is {fill: #666666;}

####text.barLabel ####text.bargridLabel The text that labels a bargrid series. The default is {font-family: 'Cutive',Helvetica, sans-serif; font-size: 12px;}

Clone this wiki locally