Series Point Configuration

Shows how to populate charts with data.

Populating Data

Points can be represented as simple arrays to reduce the amount of text necessary to add points, or as objects with access to all point properties.

Simple Arrays and Values

You can use the following types to specify points as arrays or as y values.

A numeric X axis and [x, y] points.

{
  series: [
    {
      name: "series 1",
      points: [[1, 10], [2, 16], [3, 8], [4, 12], [5, 18]]
    }
  ]
}

A category X axis and [x, y] points.

{
  series: [
    {
      name: "series 1",
      points: [["one", 10], ["two", 16], ["three", 8], ["four", 12], ["five", 18]]
    }
  ]
}

A date X axis using string date values with [x, y] points. Note the x axis scale type is set to time.

{
  xAxis_scale_type: "time",
  series: [
    {
      name: "series 1",
      points: [["1/1/2012", 10], ["1/2/2012", 16], ["1/3/2012", 8], ["1/4/2012", 12], ["1/5/2012", 18]]
    }
  ]
}

A category X axis using string x values with [x, y] points.

{
  series: [
    {
      name: "series 1",
      points: [["1/1/2012", 10], ["1/2/2012", 16], ["1/3/2012", 8], ["1/4/2012", 12], ["1/5/2012", 18]]
    }
  ]
}

A category X axis with axis.categories set and y value points array. You can specify points as an array of numeric y values to define a more compact configuration.

{
  xAxis_categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
  series: [
    {
      name: "series 1",
      points: [10, 16, 8, 12, 18]
    },
    {
      name: "series 2",
      points: [18, 12, 8, 16, 10]
    }
  ]
}

Data Point Objects

The advantage of using data points objects is that you can define different options for each point.

{ series: [{ points: [{ x: 5, y: 5, tooltip: "%xValue - %yValue" } /*...*/] }] }

Specifying Default Options

You can set additional point options that are shared across all points through the chart defaultPoint property. For example:

{ defaultPoint: { opacity: 0.5 } }

You can set default series options for all series.

{ defaultSeries: { line_width: 3 } }

Additional point settings shared by all points in a series can be set through the series.defaultPoint property. For example:

{
  series: [
    {
      defaultPoint: { opacity: 0.5 },
      points: [
        /*...*/
      ]
    }
  ]
}

Optimizing Series Data

Consider the following series data:

{
  series: [
    {
      name: "Series 0",
      points: [
        { name: "Mason", y: 29, z: 177, attributes: { distance: 1 } },
        { name: "Andrew", y: 45, z: 66, attributes: { distance: 0 } },
        { name: "Levi", y: 65, z: 99, attributes: { distance: 2 } },
        { name: "Samuel", y: 83, z: 148, attributes: { distance: 1 } },
        { name: "Jordan", y: 66, z: 120, attributes: { distance: 0 } }
      ]
    }
  ]
}

It's recommended to that you use the native array.map() function in these cases.

{
series:[{"name":"Series 0","points":[['Mason',29,177,1],['Andrew',45,66,0],['Levi',65,99,2],['Samuel',83,148,1],['Jordan',66,120,0]].map(function(v){
			return {name:v[0], y:v[1],z:v[2],attributes:{distance:v[3]}};
			})}}]
}

However, there is a shortcut you can use if desired. It helps map arrays of values to point object properties.

{
  series: [
    {
      name: "Series 0",
      points: {
        mapTo: "name,y,z,attributes.distance",
        data: [
          ["Mason", 29, 177, 1],
          ["Andrew", 45, 66, 0],
          ["Levi", 65, 99, 2],
          ["Samuel", 83, 148, 1],
          ["Jordan", 66, 120, 0]
        ]
      }
    }
  ]
}