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:

https://app.zingsoft.com/demos/embed/YGVL60TX
https://app.zingsoft.com/demos/embed/YGVL60TX
{
  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.

https://app.zingsoft.com/demos/embed/O0QLUDJ4
https://app.zingsoft.com/demos/embed/O0QLUDJ4
{
  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-endattributes. Simply add them to your scale-x and/or scale-y object(s), and provide a pixel value.

https://app.zingsoft.com/demos/embed/FCXG6EXY
https://app.zingsoft.com/demos/embed/FCXG6EXY
{
  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.

https://app.zingsoft.com/demos/embed/YC7ZHLQ6
https://app.zingsoft.com/demos/embed/YC7ZHLQ6
{
  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.

https://app.zingsoft.com/demos/embed/QICYCBS8
https://app.zingsoft.com/demos/embed/QICYCBS8
{
  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 markerobject. 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.

https://app.zingsoft.com/demos/embed/TN9BTS21
https://app.zingsoft.com/demos/embed/TN9BTS21
{
  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 typeattribute 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.

https://app.zingsoft.com/demos/embed/Y5WFLLGD
https://app.zingsoft.com/demos/embed/Y5WFLLGD
{
    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.

https://app.zingsoft.com/demos/embed/6EA1V9HA
https://app.zingsoft.com/demos/embed/6EA1V9HA
{
    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.

https://app.zingsoft.com/demos/embed/HFKRFWPW
https://app.zingsoft.com/demos/embed/HFKRFWPW
{
  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.

https://app.zingsoft.com/demos/embed/AZZY27HK
https://app.zingsoft.com/demos/embed/AZZY27HK
{
  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.

https://app.zingsoft.com/demos/embed/4STKAMS5
https://app.zingsoft.com/demos/embed/4STKAMS5
{
  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.

https://app.zingsoft.com/demos/embed/S255IUUH
https://app.zingsoft.com/demos/embed/S255IUUH
{
  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 plotobject. 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.

https://app.zingsoft.com/demos/embed/WLGRCEUE
https://app.zingsoft.com/demos/embed/WLGRCEUE
{
  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 %vand %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.

https://app.zingsoft.com/demos/embed/6IB206T3
https://app.zingsoft.com/demos/embed/6IB206T3
{
  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 pagefor more information.

https://app.zingsoft.com/demos/embed/GS7HOQWP
https://app.zingsoft.com/demos/embed/GS7HOQWP
{
    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.