CODEWITHSUNDEEP
reactjshighcharts
Victor Bonchevski
Victor Bonchevski

Reputation: 30

Highcharts with React Legend placement and more

so I've recently introduced myself to Highcharts and I did create a hardcoded dummy chart on my app. However I'm having issues with mainpulating the placement specifically of the LEGEND circles. So here's the Link i drew code+inspiration from : https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/Combo/App.js

And here's some of my code :) 

  render() {
    const pieData = [
      {
        name: "Jane",
        y: 17
      },
      {
        name: "John",
        y: 13
      },
      {
        name: "Joe",
        y: 20
      },
      {
        name: "Ivan",
        y: 50
      }
    ];

    return (
      <HighchartsChart>


        <Legend />

        <YAxis id="number">
          <PieSeries
            id="total-consumption"
            name="Total consumption"
            data={pieData}
            center={[300, 120]}
            size={255}
            showInLegend

          />
        </YAxis>
      </HighchartsChart>
    );

so basically yeah I need the legend to move from the bottom to the right side etc , oh and as well as I'm not sure how to manipulate/display the values instead of the names on the chart itself . Thanks in advance for ANY feedback and tips, Yours truly , Victor (a confused Intern still)

Upvotes: 0

Views: 1291

Answers (1)

trixn
trixn

Reputation: 16309

As far as I can see from the examples of the react-jsx-highcharts library you are using the <Legend> component has some props that allow positioning.

To e.g. align it on the right try this:

<Legend layout="vertical" align="right" verticalAlign="middle" />

The documentation seems to be more than incomplete so your best chance is to look into the examples or dig into the source yourself to see which props might help you.

In most cases the components seem to be passing configuration options given as props to Highcharts as they are:

The intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props.

In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.

Upvotes: 1

Related Questions