score:1

Accepted answer

you can achieve something similar like in zones by adding a few series type scatter and connect them linewidth.

for better clarity, to make the scatter plot look like a line, you can disable the point marker.enabled.

  chart: {
    type: 'scatter'
  },
  plotoptions: {
    scatter: {
      linewidth: 2,
      marker: {
        enabled: false
      }
    }
  },
  series: [{
      data: [{
          x: 1,
          y: 10
        },
        {
          x: 2,
          y: 15
        }
      ],
      color: 'red'
    },
    {
      data: [{
          x: 2,
          y: 15
        },
        {
          x: 3,
          y: 25
        }
      ],
      color: 'blue'
    },
    {
      data: [{
          x: 3,
          y: 25
        },
        {
          x: 4,
          y: 5
        }
      ],
      color: 'green'
    },
  ],

demo:

http://jsfiddle.net/blacklabel/6f8noxlr/

api references:

https://api.highcharts.com/highcharts/plotoptions.scatter.marker.enabled https://api.highcharts.com/highcharts/plotoptions.scatter.linewidth

score:0

hi shivabharathi ponnuvelu, you can try with gradient i guess. https://jsfiddle.net/9l3f0w8h/29/

https://www.demo2s.com/javascript/javascript-highcharts-spline-chart-gradient-fill.html

linecolor: {
    lineargradient: [0,0,0,1],
    stops: [       
        [0, 'green'],
        [0.5, 'red'],
        [1, 'blue']
    ]
}

is there any specific reason you want to use this without zones?


Related Query

More Query from same tag