react-jsx-highcharts: BubbleSeries not working

Hi @whawker ,

I am working with Bubble series and its not generating the chart. If I change the series type to any other type(E.g. Scatter), it works fine. I am not sure if I am passing the data correctly or its some other issue. Please help.

This is the below code:

import React, { Component } from 'react';
import {
  HighchartsChart, Chart, XAxis, YAxis,  Tooltip, Legend, BubbleSeries, ScatterSeries
} from 'react-jsx-highcharts';

class CompetitiveLandscape extends Component {
  render() {
    const plotOptions = {
    };
    const data = [
       [154, 97, 100]
     ];

    return (
      <div className="chartApp">
        <HighchartsChart plotOptions={plotOptions}>
          <Chart zoomType="xy"  />
          <XAxis name="Month">
            <XAxis.Title>Year-Month</XAxis.Title>
          </XAxis>
          <YAxis id="number">
            <YAxis.Title>Basic VS. Premium</YAxis.Title>
            <BubbleSeries id="Premium" name="Premium" color="#e96c39" data={data} />
          </YAxis>
          <Legend />
          <Tooltip backgroundColor="white" shadow={false}></Tooltip>
        </HighchartsChart>
      </div>
    );
  }
}

export default CompetitiveLandscape;

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (8 by maintainers)

Most upvoted comments

Ok you can either assume the date values, and add them as an XAxis category

<XAxis categories={["2008-7", "2008-6", "2008-5", "2008-4", "2008-3", "2008-2", "2008-1", "2007-12", "2007-11", "2007-10", "2007-9", "2007-8"]} />

Or use something like lodash.zip to combine the date and value arrays into a multidimensional array.

import zip from 'lodash/zip';

renderSVTValue ({ id, name, date, value }) {
  const strId = `series-${id}`;
  const data = zip(date, value); // Using lodash zip to create multidimensional array
  return (
    <AreaSplineSeries id={strId} name={name} color="#2fd0b5" data={data} key={strId} />
  );
}

render () {
  const data = this.state.data;
  if (data.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering

  return (
    <HighchartsChart plotOptions={plotOptions}>
      // redacted
      {data.svt.map(this.renderSVTValue)}
      // redacted
    </HighchartsChart>
  );
}

whawker on Aug 16, 2017

Bubble series require the highcharts-more extension (see here to see what else “more” provides)

You should be able to include it by

import Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);

whawker on Aug 13, 2017