Styles

Variables

CSS variables are used to define styles for the graph. When any required styles are absent defaults will be provided, but to ensure that the graph fits in with the design of your page, and to reach the full potential of the graphene library, it is strongly advised that you set your own.

Linegraphs and Bargraphs

Alphas

The alpha value to apply to colours used in the graph (decimal):

--alphas-background: 0.5;
--alphas-information-panel: 1;

Colours

The colour used to draw components of the graph (hex colour):

--colours-axes-labels: #858585;
--colours-background: #19283F;
--colours-highlight-indicator: #E0DEFF;
--colours-horizontal-lines: #EAEAEA;
--colours-marker: #000000;
--colours-information-heading: #FFFFFF;
--colours-information-panel: #000000;
--colours-information-sentences: #FFFFFF;

--colours-data-axis: #EAEAEA;
--colours-data-0: #826AF9;
--colours-data-1: #2D99FF;
--colours-data-2: #F97B37;

Fonts

The font family, size and weight used to draw labels on the graph (string, integer, identifier):

--fonts-axes-labels-family: "Arial";
--fonts-axes-labels-size: 10;
--fonts-axes-labels-weight: 500;
--fonts-information-heading-family: "Arial";
--fonts-information-heading-size: 12;
--fonts-information-heading-weight: 700;
--fonts-information-sentences-family: "Arial";
--fonts-information-sentences-size: 12;
--fonts-information-sentences-weight: 500;

Radii

The radius used to draw circles on the graph (decimal):

--radii-data-highlight-indicator: 3;
--radii-highlight-indicator: 3;
--radii-information-panel-border: 10;

Widths

The stroke width used to draw lines on the graph (decimal):

--widths-data: 4;
--widths-data-highlight-indicator: 10;
--widths-highlight-indicator: 3;
--widths-marker: 2;

Linegraphs

Alphas

--alphas-selection-box: 0.25;
--alphas-under-graph: 0.75;
--alphas-data-point: 0.25;

Colours

--colours-vertical-lines: #EAEAEA;
--colours-selection-box: #00FF00;
--colours-data-point-inner: #10EDD4;
--colours-data-point-outer: #10EDD4;

--colours-data-stop-0: #FFFFFF;
--colours-data-stop-1: #FFFFFF;
--colours-data-stop-2: #FFFFFF;

Radii

--radii-data-point: 3;

Widths

--widths-data-point: 10;

Bargraphs

Colours

--colours-best-fit-0: #FFFF00;
--colours-best-fit-1: #0000FF;
--colours-best-fit-2: #00FF00;
--colours-best-fit-3: #FF0000;

Widths

--widths-best-fit: 4;