Blog Help & Support Contact About Login

 Show Nav

JavaScript Scatter Charts

Overview

A scatter chart or scatter graph displays quantitative data through points or markers (circles, squares, triangles, etc.). They are highly useful in that you can plot data points as discrete units at any x- and y-coordinate, and ZingChart offers JavaScript scatter charts that are highly customizable to meet your individual charting needs. Our scatter charts can support single or multiple data sets, be incorporated as small multiples into a trellis/panel chart, be styled with different marker types, include a straight or curved trendline, and more. Browse our ZingChart Gallery for additional ideas on what you can achieve with our scatter charts.

Scatter Chart Variations

Create a standard, horizontally-oriented, or trellis scatter chart. You can further modify your scatter chart with different marker types, trendlines, and more, which we explain how to do below.

Scatter Chart

Add a "type" attribute to your chart object. Set the chart type to "scatter". Without further modification, a scatter chart with a single data set looks like this:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ]
        }
    ]
}

Horizontal Scatter Chart

A horizontal scatter chart is specified by the "hscatter" value. With this chart type, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally. They are especially useful when working with our horizontal mixed charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hscatter", 
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ]
        }
    ]
}

Trellis Scatter Chart

Trellis scatter charts are useful when you want to compare similar data sets in a panel or grid. In the example below, each data set was assigned to its own chart object, thus displaying as a trellis of four separate scatter charts. To create your own trellis scatter chart, insert each of your individual chart objects into a graphset array. Our Adding Additional Charts page provides a more in-depth explanation on this chart type.

Note: You can adjust the spacing between your axis line(s) and plotted data using the "offset-start" and "offset-end" attributes. Simply add them to your "scale-x" and/or "scale-y" object(s), and provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset":[
    {
      "type": "scatter",
      "height":"50%",
      "width":"50%",
      "x":"0%",
      "y":"0%",
      "scale-x":{
        "offset-start":5,   //To adjust the spacing between your axis line and beginning plotted data.
        "offset-end":5,     //To adjust the spacing between your ending plotted data and axis line.
        "values":"0:10:1"   //To set your minimum, maximum, and step scale values.
      },
      "scale-y":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:100:50"
      },
      "series": [
            {"values": [
              [0.9,3],
              [2.1,13],
              [3.5,25],
              [4.9,35],
              [5.3,41],
              [6.5,57],
              [7.1,61],
              [8.7,70],
              [9.2,82],
              [9.9,95]
              ]}
          ]
    },
    {
      "type": "scatter",
      "height":"50%",
      "width":"50%",
      "x":"50%",
      "y":"0%",
      "scale-x":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:10:1"
      },
      "scale-y":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:100:50"
      },
      "series": [
            {"values": [
              [0.1,9],
              [1.8,21],
              [1.9,29],
              [4.1,33],
              [4.5,39],
              [6.9,51],
              [7.4,64],
              [8.9,70],
              [9,75],
              [9.3,93]
              ]}
          ]
    },
    {
      "type": "scatter",
      "height":"50%",
      "width":"50%",
      "x":"0%",
      "y":"50%",
      "scale-x":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:10:1"
      },
      "scale-y":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:100:50"
      },
      "series": [
            {"values": [
              [0.3,11],
              [0.9,15],
              [1.1,24],
              [2.3,29],
              [2.9,30],
              [3.3,35],
              [5.6,67],
              [6.9,70],
              [7.3,71],
              [8.9,90]
              ]}
          ]
    },
    {
      "type": "scatter",
      "height":"50%",
      "width":"50%",
      "x":"50%",
      "y":"50%",
      "scale-x":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:10:1"
      },
      "scale-y":{
        "offset-start":5,
        "offset-end":5,
        "values":"0:100:50"
      },
      "series": [
            {"values": [
              [0.5,5],
              [1.9,5],
              [2.5,10],
              [3.1,30],
              [6.5,45],
              [6.9,74],
              [7.2,50],
              [7.8,56],
              [8,61],
              [8.5,71]
              ]}
            ]
    }
  ]
}

Series Data

Scatter charts support single or multiple data sets, all contained inside the series array. Each data set is configured as an array of arrays where users specify both their x- and y-axis values. The scatter chart displayed below contains five data sets.

Note: You can also chart time-series data, which must be provided in Unix time in milliseconds. (To convert your dates into Unix time, you can use online conversion tools such as Epoch Converter.) See our Time-Series Scale section further below for a scatter chart with time-series scale and data example.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter",
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ]
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ]
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ]
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ]
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ]
        }
    ]
}

Chart-Specific Properties

Once you've set up your chart's type and series data, you can next select your desired markers or incorporate a trendline to further clarify your scatter chart's data.

Markers

Marker customization is useful for differentiating your data sets or adding emphasis to a particular one. We provide our own ZingChart markers for you to choose from, and also provide the functionality for you to create your own scatter chart markers.

Note: Scatter chart markers can also be used as an alternative to ZingChart Shapes within your plotarea. While shapes are positioned using percentages or pixels, scatter chart markers are positioned using x- and y-axis coordinates. This can allow for more precise positioning. They can also be incorporated into mixed charts to create custom chart types, such as a bullet chart with multiple markers.

ZingChart Markers

We have over thirty different marker types, which you can toggle through in the below chart. Scatter chart marker selections can be applied globally to affect all data sets or locally to affect a specific data set. Create a "marker" object, add a "type" attribute, and specify your marker type. To apply globally, make your changes inside a "plot" object. To apply locally, make your changes inside of your desired series data object.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "plot":{
    "marker":{
      "type":"square"   //Specify your marker type.
    }
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ]
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ]
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ]
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ]
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ]
        }
    ]
}

Custom Markers

You can also create your own custom markers. To do so, you'll need to add a "background-image" attribute to your "marker" object. Provide an image link to your custom marker, contained in quotes. Also add the following styling attributes: "background-color" (set to "none"), "border-color" (set to "none"), "background-repeat" (set to "no-repeat"), and "shadow" (set to false). You can also adjust the size of your markers by adding a "size" attribute. For further customization options, see our Markers JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter",
  "series": [
    {
      "values": [
        [1,9],
        [3,21],
        [5,40],
        [7,60],
        [9,81],
            ],
            "marker":{
              "background-image":"https://www.zingchart.com/resources/target.png", //Provide an image link for custom markers.
              "background-color":"none",
              "border-color":"none",
              "background-repeat":"no-repeat",
              "shadow":false,
              "size": 12
            }
        },
        {
      "values": [
        [2,15],
        [4,30],
        [6,59],
        [8,75],
        [10,99]
            ],
            "marker":{
              "background-image":"https://www.zingchart.com/resources/heart.png", //Provide an image link for custom markers.
              "background-color":"none",
              "border-color":"none",
              "background-repeat":"no-repeat",
              "shadow":false,
              "size": 12
            }
        }
    ]
}

Trendlines

We provide users the functionality to incorporate trendlines into their scatter charts. There are two ways to add them: with a "markers" array or by creating a mixed scatter/line chart.

"markers" array

Add a "markers" array to your "scale-x" and/or "scale-y" object. In the array, create an object. You'll need to add a "type" attribute and set the value to "line". You'll also need to add a "range" array, where you'll specify the beginning and ending points for your trendline. While a trendline can be drawn based on a visual estimate, you can also use your own functions or formulas to calculate your start and stop values.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "type": "scatter",
    "scale-x": {
        "markers": [
            {
                "type": "line",
                "range": [0,10],
                "line-style": "dashed"
            }
        ]
    },
    "scale-y": {
        "markers": [
            {
                "type": "line",
                "range": [0,100],
                "line-style": "dotted"
            }
        ]
    },
    "series": [
        {
            "values": [
                [1,9],
                [2,15],
                [3,21],
                [4,30],
                [5,40],
                [6,59],
                [7,60],
                [8,75],
                [9,81],
                [10,99]
            ]
        },
        {
            "values": [
                [0.9,3],
                [2.1,13],
                [3.5,25],
                [4.9,35],
                [5.3,41],
                [6.5,57],
                [7.1,61],
                [8.7,70],
                [9.2,82],
                [9.9,95]
            ]
        },
        {
            "values": [
                [0.1,9],
                [1.8,21],
                [1.9,29],
                [4.1,33],
                [4.5,39],
                [6.9,51],
                [7.4,64],
                [8.9,70],
                [9,75],
                [9.3,93]
            ]
        },
        {
            "values": [
                [0.3,11],
                [0.9,15],
                [1.1,24],
                [2.3,29],
                [2.9,30],
                [3.3,35],
                [5.6,67],
                [6.9,70],
                [7.3,71],
                [8.9,90]
            ]
        },
        {
            "values": [
                [0.5,5],
                [1.9,5],
                [2.5,10],
                [3.1,30],
                [6.5,45],
                [6.9,74],
                [7.2,50],
                [7.8,56],
                [8,61],
                [8.5,71]
            ]
        }
    ]
}

Mixed Scatter/Line Chart

You can also add a trendline by creating a mixed scatter/line chart. Read our Mixed Charts page for more detailed information on how to put together this chart type. With a scatter/line mixed chart, the advantage is that you can use the "aspect" attribute to specify your line type, i.e., to make a curved trendline with our "spline" value. You can also turn off the visibility of your line chart markers by adding a "marker" object, adding a "visible" attribute, and setting the value to false. You can also style your trendline using line styling attributes such as "line-width", "line-style" ("solid", "dotted", or "dashed") and "line-color".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "type": "mixed",
    "series": [
        {
            "type": "scatter",
            "values": [
                [1,9],
                [2,15],
                [3,21],
                [4,30],
                [5,40],
                [6,59],
                [7,60],
                [8,75],
                [9,81],
                [10,99]
            ]
        },
        {
            "type": "scatter",
            "values": [
                [0.9,3],
                [2.1,13],
                [3.5,25],
                [4.9,35],
                [5.3,41],
                [6.5,57],
                [7.1,61],
                [8.7,70],
                [9.2,82],
                [9.9,95]
            ]
        },
        {
            "type": "scatter",
            "values": [
                [0.1,9],
                [1.8,21],
                [1.9,29],
                [4.1,33],
                [4.5,39],
                [6.9,51],
                [7.4,64],
                [8.9,70],
                [9,75],
                [9.3,93]
            ]
        },
        {
            "type": "scatter",
            "values": [
                [0.3,11],
                [0.9,15],
                [1.1,24],
                [2.3,29],
                [2.9,30],
                [3.3,35],
                [5.6,67],
                [6.9,70],
                [7.3,71],
                [8.9,90]
            ]
        },
        {
            "type": "scatter",
            "values": [
                [0.5,5],
                [1.9,5],
                [2.5,10],
                [3.1,30],
                [6.5,45],
                [6.9,74],
                [7.2,50],
                [7.8,56],
                [8,61],
                [8.5,71]
            ]
        },
        {
            "type": "line",
            "aspect": "spline",
            "marker": {
                "visible": false
            },
            "line-width": 1,
            "line-style": "solid",
            "line-color": "black",
            "values": [
                [0,0],
                [5,40],
                [8,60],
                [10,100]
            ]
        }
    ]
}

Further Customization

You can next configure your scatter chart's scales, style your markers, and customize the appearance of your value boxes, tooltips, and legend.

Scales

Scatter charts generally have quantitative scales on both axes. Linear, logarithmic, and time-series scales are the most common, and we explain the basics on setting up those scale types below. For more in-depth information on X/Y-axis scales, read our tutorial on Configuring Your Scales.

Note: The following sections show scale configuration on the more commonly used axis (logarithmic scale on the y-axis ("scale-y" object), time-series scale on the x-axis ("scale-x" object)). However, you can generally make the same changes to either axis.

Linear Scale

Linear scales are ZingChart's default scale type. Your starting (or minimum), ending (or maximum), and step scale values are automatically calculated based on the data you provide. You can specify what you want your minimum, maximum, and step scale values to be by adding a "values" attribute to your "scale-x" and/or "scale-y" object. Provide your min/max/step inside a string, separated by colons. For more scale formatting options (currencies, percentages, short units, etc.), see our Scales Tutorial.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "scale-x":{
    "label":{
      "text":"Scatter Chart with a Linear Scale"
    },
    "values":"0:10:1",    //To specify your minimum, maximum, and step scale values.
    "decimals":1
  },
  "scale-y":{
    "values":"0:100:50",
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ],
            "marker":{
              "type":"ellipse"
            }
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ],
            "marker":{
              "type":"rpoly9"
            }
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ],
            "marker":{
              "type":"plus"
            }
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ],
            "marker":{
              "type":"circle"
            }
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ],
            "marker":{
              "type":"star9"
            }
        },
    ]
}

Logarithmic Scale

Logarithmic scales are also commonly used with scatter charts, typically on the y-axis ("scale-y" object). This scale type is useful when working with very large data ranges. Create one by adding a "progression" attribute to your scale object. Set the value to "log". Next, add a "log-base" attribute. Your base value can be Math.E (Euler's number, i.e., the base of natural logarithms) or 10.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "scale-x":{
    "label":{
      "text":"Scatter Chart with a Logarithmic Scale"
    },
  },
  "scale-y":{
    "progression":"log",
    "log-base":10,
    "thousands-separator":","
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99],
        [11,500],
        [12,9000]
            ],
            "marker":{
              "type":"parallelogram"
            }
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,170],
        [9.2,282],
        [9.9,395],
        [10.5,700],
        [11.2,8500]
            ],
            "marker":{
              "type":"rectangle"
            }
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,370],
        [9,475],
        [9.3,593],
        [10.3,650],
        [11.7,7000]
            ],
            "marker":{
              "type":"rpoly5"
            }
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,190],
        [10.6,350],
        [11.1,2000]
            ],
            "marker":{
              "type":"star7"
            }
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,771],
        [10.7,900],
        [11.1,6000]
            ],
            "marker":{
              "type":"gear3"
            }
        },
    ]
}

Time-Series Scale

Time-series scales are typically displayed on the x-axis ("scale-x" object) on scatter charts. This scale type is used to display increments of time, which can range from milliseconds to years. To create one, add a "min-value" attribute, "step" attribute, and "transform" object to your scale object.

For the "min-value" and "step", you'll need to specify your minimum and step scale values in Unix time, in milliseconds. (You can calculate your Unix timestamps with online conversion tools such as Epoch Converter.) The "transform" object will then convert your Unix timestamps into a readable format. Insert a "type" attribute, and set the value to "date". Next, add an "all" attribute. You can specify how you want your scale formatted by using our ZingChart tokens, contained in a string. For more in-depth information on this scale type, see our section on time-series scales in our Scales Tutorial.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "utc":true,
  "timezone":-8,
  "scale-x":{
    "label":{
      "text":"Scatter Chart with a Time-Series Scale"
    },
    "min-value":1425196800000,
    "step":"2day",
    "transform":{
      "type":"date",
      "all":"%m/%d/%y"
    }
  },
  "series": [
    {
      "values": [
        [1425225600000,9],
        [1425312000000,15],
        [1425398400000,21],
        [1425484800000,30],
        [1425571200000,40],
        [1425657600000,59],
        [1425744000000,60],
        [1425826800000,75],
        [1425913200000,81],
        [1425999600000,99]
            ],
            "marker":{
              "type":"star4"
            }
        },
        {
      "values": [
        [1425243600000,3],
        [1425322800000,13],
        [1425391200000,25],
        [1425470400000,35],
        [1425574800000,41],
        [1425697200000,57],
        [1425772800000,61],
        [1425866400000,70],
        [1425938400000,82],
        [1425985200000,95]
            ],
            "marker":{
              "type":"triangle"
            }
        },
        {
      "values": [
        [1425279600000,9],
        [1425301200000,21],
        [1425430800000,29],
        [1425488400000,33],
        [1425614400000,39],
        [1425708000000,51],
        [1425718800000,64],
        [1425859200000,70],
        [1425931200000,75],
        [1426042800000,93]
            ],
            "marker":{
              "type":"rpoly4"
            }
        },
        {
      "values": [
        [1425200400000,11],
        [1425358800000,15],
        [1425441600000,24],
        [1425535200000,29],
        [1425574800000,30],
        [1425646800000,35],
        [1425754800000,67],
        [1425852000000,70],
        [1425888000000,71],
        [1426014000000,90]
            ],
            "marker":{
              "type":"gear8"
            }
        },
        {
      "values": [
        [1425236400000,5],
        [1425337200000,5],
        [1425384000000,10],
        [1425488400000,30],
        [1425610800000,45],
        [1425686400000,74],
        [1425783600000,50],
        [1425816000000,56],
        [1425898800000,61],
        [1426028400000,71]
            ],
            "marker":{
              "type":"cross"
            }
        },
    ]
}

Marker Styling

You can style your scatter chart's markers by modifying their color, size, width, and more. In your "marker" object, use styling attributes such as "background-color" and "size" to modify your marker fill's color and size. You can also modify your border's color and width with the "border-color" and "border-width" attributes. Our markers are based on ZingChart Shapes, so refer to that page for marker-specific styling.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "plot":{
    "marker":{ //Apply marker styling globally.
              "background-color":"#00FFFF",
              "size":7,
              "border-color":"#009999",
              "border-width":2,
        "line-color":"#009999",
        "line-width":2,
      }
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ],
            "marker":{  //Apply marker styling locally.
              "type":"diamond",
        "background-color":"#FF0066",
        "size":15,
        "border-color":"#FFFF66",
        "border-width":3
            }
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ],
            "marker":{
              "type":"trapezoid"
            }
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ],
            "marker":{
              "type":"cross"
            }
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ],
            "marker":{
              "type":"star3"
            }
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ],
            "marker":{
              "type":"gear5"
            }
        },
    ]
}

Value Boxes

Value boxes are not visible on scatter charts by default. To include them in your chart, add a "value-box" object to your "plot" object. You can style and format them, as well as incorporate rules to force certain value boxes to show under certain conditions (e.g., to highlight outliers, notable data points, or minimum/maximum values). In the example chart below, rules were used to display values greater than or equal to 90 and less than or equal to 10. Read more on rules and tokens in our Logic Rules and JavaScript Tokens tutorials. Browse our JSON Attributes/Syntax page for Value Boxes for further customization options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter", 
  "plot":{
    "value-box":{
      "rules":[
        {
          "rule":"%v >= 90",
          "font-color":"green"
        },
        {
          "rule":"%v >10 && %v < 90",
          "visible":false
        },
        {
          "rule":"%v <= 10",
          "font-color":"red"
        }
      ]
    }
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ],
            "text":"Kale",
            "marker":{
              "type":"square"
            }
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ],
            "text":"Blueberries",
            "marker":{
              "type":"circle"
            }
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ],
            "text":"Tomatoes",
            "marker":{
              "type":"triangle"
            }
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ],
            "text":"Pineapples",
            "marker":{
              "type":"diamond"
            }
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ],
            "text":"Mushrooms",
            "marker":{
              "type":"gear5"
            }
        },
    ]
}

Tooltips

Tooltips appear when you hover over a data point on your scatter chart. To customize and style them, add a "tooltip" object to your chart object. You can turn their visibility on or off with a "visible" attribute. Set the value to true (default) or false. You can also specify what text appears with a "text" attribute. Place your desired text inside a string. ZingChart tokens such as %v and %t can be used here. And you can style your tooltips (font, background, borders) with attributes such as "font-color", "font-family", "background-color", "border-color", "border-width", and more. See our Tooltips JSON Attributes/Syntax page for a full list of styling options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter",
  "tooltip":{
    "text":"%t: %v",
    "font-color":"black",
    "font-family":"Georgia, serif",
    "background-color":"white",
    "border-color":"black",
    "border-width":2
  },
  "series": [
    {
      "values": [
        [1,9],
        [2,15],
        [3,21],
        [4,30],
        [5,40],
        [6,59],
        [7,60],
        [8,75],
        [9,81],
        [10,99]
            ],
            "text":"Kale",
            "marker":{
              "type":"square"
            }
        },
        {
      "values": [
        [0.9,3],
        [2.1,13],
        [3.5,25],
        [4.9,35],
        [5.3,41],
        [6.5,57],
        [7.1,61],
        [8.7,70],
        [9.2,82],
        [9.9,95]
            ],
            "text":"Blueberries",
            "marker":{
              "type":"circle"
            }
        },
        {
      "values": [
        [0.1,9],
        [1.8,21],
        [1.9,29],
        [4.1,33],
        [4.5,39],
        [6.9,51],
        [7.4,64],
        [8.9,70],
        [9,75],
        [9.3,93]
            ],
            "text":"Tomatoes",
            "marker":{
              "type":"triangle"
            }
        },
        {
      "values": [
        [0.3,11],
        [0.9,15],
        [1.1,24],
        [2.3,29],
        [2.9,30],
        [3.3,35],
        [5.6,67],
        [6.9,70],
        [7.3,71],
        [8.9,90]
            ],
            "text":"Pineapples",
            "marker":{
              "type":"diamond"
            }
        },
        {
      "values": [
        [0.5,5],
        [1.9,5],
        [2.5,10],
        [3.1,30],
        [6.5,45],
        [6.9,74],
        [7.2,50],
        [7.8,56],
        [8,61],
        [8.5,71]
            ],
            "text":"Mushrooms",
            "marker":{
              "type":"gear5"
            }
        },
    ]
}

Legend

You have the option to include a legend in your scatter chart. Add a "legend" object to your chart object. Not only do legends help users better understand your chart data, it allows them to interact with that data. You can toggle plots on and off by clicking on the legend marker that a plot is associated with. See our example chart below. You can also specify the layout and position of your legend using the "layout" and "position" attributes, style your text within an "item" object, and style your legend markers within a "marker" object. See our page on ZingChart Legends, as well as our Legends JSON Attributes/Syntax page for more information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "type": "scatter",
    "legend": {
        "layout": "5x1",
        "position": "97% 73%",
        "item": {
            "font-color": "brown",
            "font-family": "Georgia"
        },
        "background-color": "white",
        "alpha": 0.5,
        "border-color": "none",
        "shadow": false,
        "marker": {
            "type": "inherit"
        }
    },
    "series": [
        {
            "values": [
                [1,9],
                [2,15],
                [3,21],
                [4,30],
                [5,40],
                [6,59],
                [7,60],
                [8,75],
                [9,81],
                [10,99]
            ],
            "text": "Kale",
            "marker": {
                "type": "square"
            }
        },
        {
            "values": [
                [0.9,3],
                [2.1,13],
                [3.5,25],
                [4.9,35],
                [5.3,41],
                [6.5,57],
                [7.1,61],
                [8.7,70],
                [9.2,82],
                [9.9,95]
            ],
            "text": "Blueberries",
            "marker": {
                "type": "circle"
            }
        },
        {
            "values": [
                [0.1,9],
                [1.8,21],
                [1.9,29],
                [4.1,33],
                [4.5,39],
                [6.9,51],
                [7.4,64],
                [8.9,70],
                [9,75],
                [9.3,93]
            ],
            "text": "Tomatoes",
            "marker": {
                "type": "triangle"
            }
        },
        {
            "values": [
                [0.3,11],
                [0.9,15],
                [1.1,24],
                [2.3,29],
                [2.9,30],
                [3.3,35],
                [5.6,67],
                [6.9,70],
                [7.3,71],
                [8.9,90]
            ],
            "text": "Pineapples",
            "marker": {
                "type": "diamond"
            }
        },
        {
            "values": [
                [0.5,5],
                [1.9,5],
                [2.5,10],
                [3.1,30],
                [6.5,45],
                [6.9,74],
                [7.2,50],
                [7.8,56],
                [8,61],
                [8.5,71]
            ],
            "text": "Mushrooms",
            "marker": {
                "type": "gear5"
            }
        }
    ]
}

Summary

Got a question about how scatter charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.