graphTheme.js

/*
  "material" theme (VictoryTheme.material)
  Try changing the theme. You could start with `colors` or `fontSize`.
*/

// Colors
const yellow200 = "#FFF59D";
const deepOrange600 = "#F4511E";
const lime300 = "#DCE775";
const lightGreen500 = "#8BC34A";
const teal700 = "#00796B";
const cyan900 = "#006064";
const colors = [
    deepOrange600,
    yellow200,
    lime300,
    lightGreen500,
    teal700,
    cyan900
];
const pipsyBlue = '#0A61DF';
const blueGrey50 = "#ECEFF1";
const blueGrey300 = "#90A4AE";
const blueGrey700 = "#455A64";
const grey900 = "#212121";
const greyPipsy = '#E7E7E7';
// Typography
const sansSerif = "'Proxima Nova', 'Helvetica Neue', Helvetica, sans-serif";
const letterSpacing = "normal";
const fontSize = 12;

// Layout
const padding = 8;
const baseProps = {
    width: 350,
    height: 350,
    padding: 50
};

// Labels
const baseLabelStyles = {
    fontFamily: sansSerif,
    fontSize,
    letterSpacing,
    padding,
    fill: 'white'
};

var assign = require('object-assign');

const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);

// Strokes
const strokeDasharray = "10, 5";
const strokeLinecap = "round";
const strokeLinejoin = "round";

// Put it all together...
export const pipsyTheme = {
    area: assign({
        style: {
            data: {
                fill: pipsyBlue,
                opacity:.8
            },
            labels: centeredLabelStyles
        }
    }, baseProps),
    axis: assign({
        style: {
            axis: {
                fill: "transparent",
                stroke: '#E7E7E7',
                strokeWidth: 1,
                strokeLinecap,
                strokeLinejoin
            },
            axisLabel: assign({}, centeredLabelStyles, {
                padding,
                stroke: "transparent"
            }),
            grid: {
                fill: "transparent",
                stroke: '#E7E7E7'
            },
            ticks: {
                fill: "transparent",
                size: 5,
                stroke: blueGrey300,
                strokeWidth: 1,
                strokeLinecap,
                strokeLinejoin
            },
            tickLabels: assign({}, baseLabelStyles, {
                fill: blueGrey700,
                stroke: "transparent"
            })
        }
    }, baseProps),
    bar: assign({
        style: {
            data: {
                fill: blueGrey700,
                padding,
                stroke: "transparent",
                strokeWidth: 0,
                width: 5
            },
            labels: baseLabelStyles
        }
    }, baseProps),
    candlestick: assign({
        style: {
            data: {
                stroke: blueGrey700
            },
            labels: centeredLabelStyles
        },
        candleColors: {
            positive: "#ffffff",
            negative: blueGrey700
        }
    }, baseProps),
    chart: baseProps,
    errorbar: assign({
        style: {
            data: {
                fill: "transparent",
                opacity: 1,
                stroke: blueGrey700,
                strokeWidth: 2
            },
            labels: assign({}, centeredLabelStyles, {
                stroke: "transparent",
                strokeWidth: 0
            })
        }
    }, baseProps),
    group: assign({
        colorScale: colors
    }, baseProps),
    line: assign({
        style: {
            data: {
                fill: "transparent",
                opacity: 1,
                stroke: pipsyBlue,
                strokeWidth: 2
            },
            labels: assign({}, baseLabelStyles, {
                stroke: "transparent",
                strokeWidth: 0,
                textAnchor: "start"
            })
        }
    }, baseProps),
    pie: assign({
        colorScale: colors,
        style: {
            data: {
                padding,
                stroke: blueGrey50,
                strokeWidth: 1
            },
            labels: assign({}, baseLabelStyles, {
                padding: 20,
                stroke: "transparent",
                strokeWidth: 0
            })
        }
    }, baseProps),
    scatter: assign({
        style: {
            data: {
                fill: blueGrey700,
                opacity: 1,
                stroke: "transparent",
                strokeWidth: 0
            },
            labels: assign({}, centeredLabelStyles, {
                stroke: "transparent"
            })
        }
    }, baseProps),
    stack: assign({
        colorScale: colors
    }, baseProps),
    tooltip: assign({
        style: {
            data: {
                fill: "red",
                stroke: "transparent",
                strokeWidth: 0
            },
            labels: centeredLabelStyles,
            flyout: {
                stroke: blueGrey700,
                strokeWidth: 1,
                fill: "red"
            }
        },
        flyoutProps: {
            cornerRadius: 10,
            pointerLength: 10
        }
    }, {}),
    voronoi: assign({
        style: {
            data: {
                fill: "transparent",
                stroke: "transparent",
                strokeWidth: 0
            },
            labels: centeredLabelStyles
        }
    }, baseProps)
};

cool