HTML5 & JS Scatter Charts

Scatter chart is used to plot co-relations between two variables for a set of dataPoints, each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.




Scatter Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint markerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint markerColor String dataSeries/ dataPoint Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerBorderColor String dataSeries/ dataPoint Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerSize Number auto. 5,10..
dataSeries/ dataPoint markerBorderThickness Number 1 4,7..
dataSeries fillOpacity Number 1 .2,.4,1 etc

Basic Scatter Chart

Try it Yourself by Editing the Code below.


Scatter Chart With Additional Customization

Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 12

  1. window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    title:{
    text: “Health Status of KIS Students Who Eat Flour”
    },

    data: [
    {
    type: “scatter”,
    dataPoints: [

    { x: 4, y: 4 },
    { x: 4, y: 2 },
    { x: 2, y: 2 },
    { x: 5, y: 3 },
    { x: 4, y: 3 },

    { x: 4, y: 4 },
    { x: 4, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 2 },
    { x: 4, y: 3 },

    { x: 4, y: 4 },
    { x: 5, y: 4 },
    { x: 4, y: 3 },
    { x: 2, y: 4 },
    { x: 2, y: 4 },

    { x: 3, y: 3 },
    { x: 4, y: 2 },
    { x: 4, y: 5 },
    { x: 4, y: 5 },
    { x: 3, y: 3 },

    { x: 3, y: 4 },
    { x: 5, y: 2 },
    { x: 4, y: 3 },
    { x: 5, y: 4 },
    { x: 3, y: 5 },

    { x: 4, y: 4 },
    { x: 3, y: 3 },
    { x: 4, y: 3 },
    { x: 5, y: 5 },
    { x: 4, y: 5 },

    { x: 4, y: 3 },
    { x: 2, y: 1 },
    { x: 2, y: 3 },
    { x: 2, y: 4 },
    { x: 2, y: 4 },

    ]
    }
    ]
    });

    chart.render();
    }

  2. I wanted to do a scatter representation of a set of data with string values for the X-axis i.e. they are not really numbers but still need to be grouped. For example:

    data = [{ x: ‘Bangalore’, y: 23 }, { x: ‘Bangalore’, y: 34 }, { x: ‘Mysore’, y: 100 }, { x: ‘Bangalore’, y: 42 }, { x: ‘Mysore’, y: 400 }]

    What is the best way to do a scatter plot for this?

  3. Hello,

    I would like to make a scatter chart using these data . Each group is represented by a markerType and a unique color. On X, I put date and Y = moy.

    date moy nom
    2013-12-17 13:45 87.975 Groupe1
    2013-12-17 14:17 124.901 Groupe1
    2013-12-17 14:43 247.245 Groupe1
    2013-12-17 13:45 42958.4 Groupe2
    2013-12-17 14:17 0 Groupe2
    2013-12-17 14:43 109146 Groupe2
    2013-12-17 15:07 0 Groupe2
    2013-12-18 14:43 17715.8 Groupe3
    2013-12-18 15:00 183.443 Groupe3
    2013-12-18 15:00 2994.61 Groupe3
    2013-12-18 15:19 185.327 Groupe3

    Thanks a lot

      • Thank you for your help!

        I still have many questions:

        – Is it possible to get logScale on Y axis?
        – Is it possible to set a drop down menu on Y axis that contains several Y axis.
        – Is possible to display data and time on X axis?

        Thank you very much!!!

  4. Hi,

    I would like to clarify whether it is possible to have transparent markers (i.e. only borders should be visible). I’ve tried MarkerBorderColor: ‘red’ and color: ‘transparent’, but MarkerBorderColor worked only on Hover event.

    Please find the example below:
    http://jsfiddle.net/rq6aukty/1/

    Thank you

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.