How to feed two values to y axis at a time corresponds to single x axis value in Highchart

Question

My requirement is to plot a Highchart using X and Y axes. The x-axis shows years and the y-axis shows the corresponding amount in millions.

For the year 1966, I would like see my chart first traverse to 2396, and then to 435, and only then should it go to the next year 1968 which has the value 435 again. Please see my commented line(// y: (2396, 435) which does not work for me. Please help to resolve this using Highchart.

Below is my Code which you can directly copy to https://jsfiddle.net/y0kqsrav/ editor and execute.

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1964', '1966', '1968', '1970'],

        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 100;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        areaspline: {

            stacking: 'areaspline',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666',

            }
        }
    },
    series: [{
        name: 'USA',
        data: [
        {
          x: 1964,
          y: 2416
        },
        {
          x: 1966,
          y: 2396
         // y: (2396, 435),
        },
        {
          x: 1968,
          y: 435
        },
        {
          x: 1970,
          y: 223
        }
        ]
    }]
});

score 0 · Answer 1 · answered Jul 06 '18 at 00:28

0

Add another data point for 1966

{ x: 1966, y: 435 },

And remove the stacking.

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1964', '1966', '1968', '1970'],

        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 100;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        areaspline: {

    //        stacking: 'areaspline',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666',

            }
        }
    },
    series: [{
        name: 'USA',
        data: [
        {
          x: 1964,
          y: 2416
        },
        {
          x: 1966,
          y: 2396
         // y: (2396, 435),
        },
        {
          x: 1966,
          y: 435
        },
        {
          x: 1968,
          y: 435
        },
        {
          x: 1970,
          y: 223
        }
        ]
    }]
});

https://jsfiddle.net/y0kqsrav/112/

answered Jul 06 '18 at 00:28

Barbara Laird

12,599
2
44
57

Hi, Thank you so much for answer. But I would like to see my chart curved. Since we removed the stacking - the graph looks square. But my srtict requirement is to make it curved. Could you please help if you get chance? – Kiran Jul 06 '18 at 07:31
Or in other terms, I need to see all the corners in graph to be in curved shape. Please suggest – Kiran Jul 06 '18 at 13:32
You can use 1965.5 and 1966.5 to get the curve instead of the sharp drop-off. But, if the data is actually that the value dropped in that year, the right angle makes sense. – Barbara Laird Jul 06 '18 at 15:51
Hi, using your inputs - here I am providing my realtime data which my project backend dynamically produces in series. If I uncomment the commented line([Date.UTC(2018, 11, 29), 80000000],) then my chart generating square shaped graph. And I am not sure in this case if I can use similar logic as you mentioned 1965.5 and 1966.5 because it alter the actual date which is given as input during run time. Any suggestions how I can achieve this to plot curved graph(I mean all the corners must not be sharp square). https://jsfiddle.net/y0kqsrav/169/ – Kiran Jul 06 '18 at 21:50
https://jsfiddle.net/y0kqsrav/170/ in this example - the grey square area is exisitng loan and the sky blue colored area is new Loan given. Together in this chart we have 3 square corners. And my requirement is to see all three corners curved without actually modifying the actual date on X-axis. Thanks in advance – Kiran Jul 06 '18 at 22:00
I understand right angle makes sense but my front end designer wants to see the corners little curved. Is there any way that is possible? – Kiran Jul 08 '18 at 15:49
Sorry, I don't know of any way of doing it without fudging the data. – Barbara Laird Jul 08 '18 at 22:47
it's ok. I am still trying if i can crack some way. Hoping for the best. :) – Kiran Jul 09 '18 at 15:49

score 0 · Answer 2 · answered Jul 06 '18 at 13:53

0

Point's x coordinate corresponds to category index while using categories. So you should define you data like this to achieve the desired behavior:

xAxis: {
    categories: ['1964', '1966', '1968', '1970'],

(...)

  series: [{
    name: 'USA',
    data: [{
        x: 0,
        y: 2416
      },
      {
        x: 1.7, // move it a little bit to the left
        y: 2396
      },
      {
        x: 2.3, // move it a little bit to the right
        y: 435
      },
      {
        x: 4,
        y: 435
      },
      {
        x: 6,
        y: 223
      }
    ]
  }]

Live demo: http://jsfiddle.net/BlackLabel/54s2tcbr/

answered Jul 06 '18 at 13:53

Kamil Kulig

5,756
1
8
12

Hi, using your inputs - here I am providing my realtime data which my project backend dynamically produces in series. If I uncomment the commented line([Date.UTC(2018, 11, 29), 80000000],) then my chart generating square shaped graph. And I am not sure in this case if I can use similar logic as you mentioned for x-axis because it alter the actual date which is given as input during run time. Any suggestions how I can achieve this to plot curved graph(I mean all the corners must not be sharp square). https://jsfiddle.net/y0kqsrav/169/ – Kiran Jul 06 '18 at 21:53
You can do a little trick here: display a little bit moved point on the graph and show the actual value in tooltip (use `tooltip.formatter` for that): https://jsfiddle.net/BlackLabel/zx9r7psL/ – Kamil Kulig Jul 09 '18 at 10:04
Yes, that is true but unfortunately as it shows some difference between both the points - it is not accepted by business team. :( I am still trying if is there any way to make the curve shape wthout playing with dates. May be be you can also help if you get any idea. Thanks for your active suggestions. – Kiran Jul 09 '18 at 15:48
I'm afraid that there's no easy solution for that. The problem is quite complex - you need a new algorithm for generating a series path (spline series won't for your requirements). You can create a new series type - use spline series as an example of how to do it: https://github.com/highcharts/highcharts/blob/master/js/parts/SplineSeries.js As you can see, only one function is implemented for the spline series: `getPointSpline`. – Kamil Kulig Jul 10 '18 at 10:34
Sure. Will try this out. Thanks much. – Kiran Jul 11 '18 at 20:18

How to feed two values to y axis at a time corresponds to single x axis value in Highchart

2 Answers2