CODEWITHSUNDEEP
javascriptreactjschartsvictory-charts
readikus
readikus

Reputation: 366

Victory Chart Legend Custom Icon

I would like to add a custom icon type for a victory legend. Instead of a square or circle, I want to display a line (and eventually a completely custom icon - either drawn as an SVG or a PNG). If anyone knows how to achieve this, I would appreciate any help.

<VictoryLegend x={825} y={0}
  orientation="vertical"
  gutter={10}
  style={{ border: { stroke: "black" }, title: {fontSize: 20} }}
  style={{ title: {fontSize: 10 } }}
  data={[
    { name: "Square", symbol: { fill: "black", type: "square" } },
    { name: "Line", symbol: { fill: "blue", type: "line" }},
  ]}
/>

Upvotes: 4

Views: 2080

Answers (1)

Armen Asaduryan
Armen Asaduryan

Reputation: 324

you must add this parameter in VictoryLegend component

dataComponent={<MyLine />}

after initial component like this

class MyLine extends React.Component {
  render() {
    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
    const line = datum.name === "Square" ? <line x1={x-5} y1={y} x2={x+5} y2={y} style={{stroke: '#fff', strokeWidth: 1, opacity: 1, fill: "none"}} /> : <line x1={x-5} y1={y} x2={x+5} y2={y} style={{stroke: '#fff', strokeWidth: 1, opacity: 1, fill: "none", strokeDasharray: 1}} />;
    return line;
  }
}

Upvotes: 2

Related Questions