Question 254901 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – [Highcharts-react]: How to create a chart like this one

enter image description here

I have looked through all the documentation, but I still cannot customize the Y-axis like this.

I need to fix the year time series, only 10 points need to be displayed, and I can adjust the title like "1999-2000"

This is my current config:

{
  chart: {
    type: "bar",
    stacked: true,
  },
  xAxis: {
    categories: ["Country 1", "Country 2", "Country 3", "Country 4"],
  },
  plotOptions: {
    series: {
      stacking: "percent",
      dataLabels: {
        enabled: false,
      },
    },
  },
  series: [
    {
      name: "No-adopted",
      data: [1, 0, 0, 0, 0],
      color: "#B7B7B7",
    },
    {
      name: "Adopted",
      data: [10, 0, 0, 0, 0],
      color: "#861086",
    },
  ],
};

This is the current seeing:
enter image description here

Thanks for your help!

Tags:

2

Answers


  1. 0

    Update

    Hey sorry for the dumb answer without reading your question close enough. I went back and done some research, but wasn’t able to find a good way to achieve this. However, I was able to get it close to the screen shot you provided — by using the combination of tickInterval and categories in yaxis:

      yAxis: {
    min: 0,
    max: 100,
    tickInterval: 10,
    categories: [
      '',
      ...Array(10).fill('1971-1975'),
      ...Array(10).fill('1976-1980'),
      ...Array(10).fill('1981-1985'),
      ...Array(10).fill('1986-1990'),
      ...Array(10).fill('1991-1995'),
      ...Array(10).fill('1996-2000'),
      ...Array(10).fill('2001-2005'),
      ...Array(10).fill('2006-2010'),
      ...Array(10).fill('2011-2015'),
      ...Array(10).fill('2016-2020')
    ]
  },

    I am repeating the same thing for 10 times to make it total of 100 + 1 (index 0) times to fill out all the y-axis (total of 100 due to being a percentage).

    Elegant? Absolutely not, but I wasn’t able to find the proper solution to this problem.

    Heres codesandbox demo: https://codesandbox.io/s/cranky-wescoff-lvk9j2?file=/src/Example.tsx

    Login or Signup to reply.
  2. 0

    You can use yAxis.tickPositioner and yAxis.labels.formatter functions to achieve the result that you want to achieve. For example:

      yAxis: {
    showFirstLabel: false,
    showLastLabel: false,
    tickPositioner: function() {
      const first = 1971;
      const step = 5;
      const min = 1968;
      const max = 2016;
      const ticks = [min];

      for (let tick = first; tick <= max; tick += step) {
        ticks.push(tick);
      }
      ticks.push(2018);
      return ticks;
    },
    labels: {
      autoRotation: false,
      style: {
        fontSize: 11
      },
      formatter: function() {
        return this.value + '-' + (this.value + 4)
      }
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/2gr1L493/

    API Reference:

    https://api.highcharts.com/highcharts/xAxis.labels.formatter

    https://api.highcharts.com/highcharts/xAxis.tickPositioner

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search