<commit_before>VictoryTheme
=============

Implement themes for your Victory charts. VictoryTheme allows you to create a consistent look across all of your chart elements, either by using one of the included themes or by creating your own. VictoryTheme and custom themes are supported by all Victory components.

## Grayscale Theme

All victory components use the `grayscale` theme by default. This theme is built to be as simple and unobtrusive as possible

```playground
<VictoryChart>
  <VictoryStack
    height={500}
  >
    <VictoryArea
      data={[
        {x: 1, y: 1},
        {x: 2, y: 2},
        {x: 3, y: 3}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 2},
        {x: 2, y: 1},
        {x: 3, y: 1}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 3},
        {x: 2, y: 4},
        {x: 3, y: 2}
      ]}
    />
  </VictoryStack>
</VictoryChart>
```



But it can easily be extended with `style` and other props, like `colorScale`

```playground
<VictoryChart>
  <VictoryStack
    height={500}
    colorScale={[
      "black", "tomato", "orange"
    ]}
    style={{
      data: {opacity: 0.6}
    }}
  >
    <VictoryArea
      data={[
        {x: 1, y: 1},
        {x: 2, y: 2},
        {x: 3, y: 3}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 2},
        {x: 2, y: 1},
        {x: 3, y: 1}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 3},
        {x: 2, y: 4},
        {x: 3, y: 2}
      ]}
    />
  </VictoryStack>
</VictoryChart>
```

### Material Theme

Using `VictoryTheme.material` for a component's `theme` prop applies a clean, bright style to your charts.

``` playground
<VictoryChart theme={VictoryTheme.material}>
  <VictoryLine
    interpolation="natural"
    y={(data) =>
      Math.sin(2 * Math.PI * data.x) + 1
    }
  />
  <VictoryScatter 
    y={(data) =>
      Math.sin(2 * Math.PI * data.x) + 1
    }
    samples={15}
  />
</VictoryChart>
```

Themes may be supplied to wrapper components like [VictoryChart][] or [VictoryStack][], and they will be applied to all child components as well.

```playground
<VictoryChart theme={VictoryTheme.material}>
  <VictoryStack>
    {
      range(6).map((index) => {
        return <VictoryArea key={index}/>
      })
    }
  </VictoryStack>
</VictoryChart>
```

### Create Your Own Custom Theme Object

Theme objects may be provided with `style` and any other props related to layout such as `width` and `height`, and even props like `symbol` and `size` as in [VictoryScatter][] below.

```playground_norender
class App extends React.Component {
  render() {
    const myTheme = {
      scatter: {
        style: {
          data: {
            fill: "red"
          },
          labels: {
            padding: -25,
            fontFamily: "Garamond"
          }
        },
        symbol: "star",
        size: 7
      },
      line: {
        style: {
          data: {
            stroke: "red",
            strokeWidth: 3,
            fill: "none"
          }
        }
      }
    };

    const data = [
      {x: 1, y: 1},
      {x: 2, y: 4},
      {x: 3, y: 2},
      {x: 4, y: 6},
      {x: 5, y: 5},
      {x: 6, y: 9}
    ];

    return (
      <svg style={{width: "100%", height: "100%"}} viewBox="0 25 350 300">
        <VictoryScatter
          data={data}
          theme={myTheme}
          labels={["1", "2", "3", "4", "5", "6"]}
        />
        <VictoryLine
          data={data}
          theme={myTheme}
        />
      </svg>
    )
  }
}

ReactDOM.render(<App/>, mountNode);
```

Want to create a full theme object like Victory's Material theme? Just start adding props to the following namespaces, just as you would if you were providing props to corresponding victory components. Please not that only props that affect layout are supported. `data`, `scale` etc as well as any custom components should still be provided via props rather than themes.

```
{
  area: {
    
  },
  axis: {
    
  },
  bar: {
    
  },
  candlestick: {
    
  },
  chart: {

    },<commit_msg>Custom Themes - fix typos, add link to Theme Park<commit_after>VictoryTheme
=============

Implement themes for your Victory charts. VictoryTheme allows you to create a consistent look across all of your chart elements, either by using one of the included themes or by creating your own. VictoryTheme and custom themes are supported by all Victory components.

## Grayscale Theme

All victory components use the `grayscale` theme by default. This theme is built to be as simple and unobtrusive as possible

```playground
<VictoryChart>
  <VictoryStack
    height={500}
  >
    <VictoryArea
      data={[
        {x: 1, y: 1},
        {x: 2, y: 2},
        {x: 3, y: 3}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 2},
        {x: 2, y: 1},
        {x: 3, y: 1}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 3},
        {x: 2, y: 4},
        {x: 3, y: 2}
      ]}
    />
  </VictoryStack>
</VictoryChart>
```



But it can easily be extended with `style` and other props, like `colorScale`

```playground
<VictoryChart>
  <VictoryStack
    height={500}
    colorScale={[
      "black", "tomato", "orange"
    ]}
    style={{
      data: {opacity: 0.6}
    }}
  >
    <VictoryArea
      data={[
        {x: 1, y: 1},
        {x: 2, y: 2},
        {x: 3, y: 3}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 2},
        {x: 2, y: 1},
        {x: 3, y: 1}
      ]}
    />
    <VictoryArea
      data={[
        {x: 1, y: 3},
        {x: 2, y: 4},
        {x: 3, y: 2}
      ]}
    />
  </VictoryStack>
</VictoryChart>
```

### Material Theme

Using `VictoryTheme.material` for a component's `theme` prop applies a clean, bright style to your charts.

``` playground
<VictoryChart theme={VictoryTheme.material}>
  <VictoryLine
    interpolation="natural"
    y={(data) =>
      Math.sin(2 * Math.PI * data.x) + 1
    }
  />
  <VictoryScatter 
    y={(data) =>
      Math.sin(2 * Math.PI * data.x) + 1
    }
    samples={15}
  />
</VictoryChart>
```

Themes may be supplied to wrapper components like [VictoryChart][] or [VictoryStack][], and they will be applied to all child components as well.

```playground
<VictoryChart theme={VictoryTheme.material}>
  <VictoryStack>
    {
      range(6).map((index) => {
        return <VictoryArea key={index}/>
      })
    }
  </VictoryStack>
</VictoryChart>
```

### Create Your Own Custom Theme Object

Theme objects may be provided with `style` and any other props related to layout such as `width` and `height`, and even props like `symbol` and `size` as in [VictoryScatter][] below.

```playground_norender
class App extends React.Component {
  render() {
    const myTheme = {
      scatter: {
        style: {
          data: {
            fill: "red"
          },
          labels: {
            padding: -25,
            fontFamily: "Garamond"
          }
        },
        symbol: "star",
        size: 7
      },
      line: {
        style: {
          data: {
            stroke: "red",
            strokeWidth: 3,
            fill: "none"
          }
        }
      }
    };

    const data = [
      {x: 1, y: 1},
      {x: 2, y: 4},
      {x: 3, y: 2},
      {x: 4, y: 6},
      {x: 5, y: 5},
      {x: 6, y: 9}
    ];

    return (
      <svg style={{width: "100%", height: "100%"}} viewBox="0 25 350 300">
        <VictoryScatter
          data={data}
          theme={myTheme}
          labels={["1", "2", "3", "4", "5", "6"]}
        />
        <VictoryLine
          data={data}
          theme={myTheme}
        />
      </svg>
    )
  }
}

ReactDOM.render(<App/>, mountNode);
```

Want to create a full theme object like Victory's Material theme? Just start adding props to the following namespaces, just as you would if you were providing props to corresponding Victory components. Please note that only props that affect layout and appearance are supported. `data`, `scale`, etc. as well as any custom components should still be provided via props rather than themes.

You can try editting the Victory themes and creating your own in the interactive [Theme Park](https://formidable.com/open-source/victory/recipes/theme-park).

```
{
  area: {
    
  },
  axis: {
    
  },
  bar: {
    
  },
  candlestick: {
    
  },
  chart: {

    },
{'fraction_non_alphanumeric': 0.1436138196701577, 'fraction_numerical': 0.021186950764415555, 'mean_word_length': 1.9767108563238982, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 65, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5975511', 'n_tokens_mistral': 3014, 'n_tokens_neox': 2799, 'n_words': 894}