Search code examples
highcharts

Is there a way to have smoother curves in HighCharts JS?

I'm using HighCharts to display a chart. Currently the lines are very rigid and create sharp points when going up and down. Is there a way alter the configuration options to create a smoother curve, similar to the image below? chart image that I'd like to replicate

I've tried setting the type to spline, but doesn't seem to have any effect

plotOptions: { series: { type: 'spline' } }

Solution

  • The chart in the image you sent is also Highcharts. 😅

    So yes, it can be done just in a slightly different way than you tried. This can be done by setting the series type in 2 places, unfortunately this cannot be done in plotOptions, this property is used to set options for these individual series types.

    The first way is to use chart.type which sets the default series type:

    Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  series: [{
    data: [2, 5, 2, 3, 6, 5]
  }]
});

    The second way is to set the type directly in a given series (series.type):

    Highcharts.chart('container', {
  series: [{
    type: 'spline',
    data: [2, 5, 2, 3, 6, 5]
  }, {
    type: 'line',
    data: [3, 4, 6, 2, 5, 1]
  }]
});