Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - Scatter chart with a line connecting the dots in the series

Tags:

highcharts

I'm trying to recreate an excel chart using Highcharts.

It's a scatter chart, with the dots for each series connected directly (not a trendline). This is the example from excel:

enter image description here

It has to be a scatter charts as the x-axis value are non-periodic (or logarithmic)

Any help gratefully appreciated!

like image 373
SteveWF Avatar asked Dec 26 '22 08:12

SteveWF


2 Answers

A very helpful Highcharts service team member provided this answer: http://jsfiddle.net/sc5Gv/4/

$(function () {
        $('#container').highcharts({
            chart:{
                type:'scatter'
            },
            plotOptions:{
                scatter:{
                    lineWidth:2
                }
            },
            series: [{
                name: 'Tokyo',
                data: [[1.5,7], [2.3,9], [4.2,5.6]]
            }, {
                name: 'New York',
                data: [[0.8,9], [2.1,6.3], [5.0, 10.1]]
            }]
        });
    });
like image 59
SteveWF Avatar answered Feb 23 '23 00:02

SteveWF


What kind of problem did you come across, because its default chart:

  • line http://jsfiddle.net/sc5Gv/2/
  • scatter with enabled lineWidth (http://jsfiddle.net/sc5Gv/1/)
like image 44
Sebastian Bochan Avatar answered Feb 23 '23 01:02

Sebastian Bochan