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 0 4,7..
dataSeries fillOpacity Number 1 .2,.4,1 etc

Basic Scatter Chart

Try Editing The Code

Scatter Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

12 Comments

  1. Juyi Sung says:

    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. Pavan Sudarshan says:

    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?

  4. Soumaya says:

    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

      • Soumaya says:

        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!!!

  5. Anna says:

    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

If you have any questions, please feel free to ask in our forums. Ask Question