Blog Help & Support Contact About Login

 Show Nav

Chart Plot/Series Styling

Overview

While ZingChart provides default styling themes for all of our chart types, most users want to modify the appearance to better meet the needs of their individual projects. It is in the "plot" and "series" objects that you apply attributes to change the styling of data points on your chart. These changes can be applied to affect a single series or the entire series array. We also offer the functionality to style by node or individual data points. Finally, this tutorial explains the different state types, or how data can appear under different conditions (when data points are hovered over, selected, and so on).

Plot vs. Series

When styling your charts, you can make global changes (to affect all of your series data) or local changes (to affect individual series). These changes are made in the "plot" object or individual "series" objects, respectively.

"plot": {
  //For global styling, place styling attributes here.
},
"series": [
  {
    "values": [y0, y1, y2, y3, ..., yN],
      //For local styling, place styling attributes here.
  },
  ...
]

These objects act as containers for your styling attributes, as well as all plot/series-related modifications. These include aspects ("spline", "histogram", "stepped") and chart-specific attributes ("bar-width" for bar charts, "active-area" for area charts, "offset-r" for pie charts). Browse our Plot/Series JSON Attributes/Syntax page for a full list of object and attribute options.

Here is a line chart with three data sets. This is how the chart appears when it is completely unstyled.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

"plot" object

Adding styling attributes to the "plot" object means that all the series in the series array will be affected. In the below chart, a "line-color" attribute, "line-style" attribute, and "marker" object were added to the "plot" object. All three data sets appear as purple lines in a dash-dot style, and the markers (representing the data points) are colored orange and surrounded with a green border.

Note: What styling attributes to apply varies based on chart type. The below Styling Attributes section provides an overview of the different attribute types.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "plot": {
    "line-color": "purple",
    "line-style": "dashdot",
    "marker": {
      "background-color": "orange",
      "border-color": "green",
      "border-width": 2
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

"series" objects

When you want to make changes to a specific series, you'll add the styling attributes to that particular series object. In the below chart, each series contains its own set of unique attributes: series 1 is drawn with a red dashed line and large orange markers; series 2 is a thin gray line with pink-bordered green markers; and series 3 is a dotted blue line with purple markers.

Note: You can place styling attributes in both the "plot" and/or individual "series" objects to achieve the appearance that you want. Attributes placed in the latter will override those in the former.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series": [{ //Series object 1
    "values": [3, 4, 11, 5, 19, 7],
    "line-color": "red",
    "line-style": "dashed",
    "marker": {
      "background-color": "orange",
      "size": 9
    }
  }, { //Series object 2
    "values": [9, 19, 15, 25, 12, 14],
    "line-color": "gray",
    "line-width": 1,
    "line-style": "solid",
    "marker": {
      "background-color": "green",
      "size": 7,
      "border-color": "pink",
      "border-width": 2
    }
  }, { //Series object 3
    "values": [15, 29, 19, 21, 25, 26],
    "line-color": "blue",
    "line-style": "dotted",
    "marker": {
      "background-color": "purple",
      "size": 5
    }
  }]
}

Series vs. Node

As explained in the above Plot vs. Series section, users generally style by series. They can style all series at once (by placing attributes in the "plot" object) or individual series (by placing attributes in the applicable "series" object). However, you also have the option to style by node, or individual data point.

Series

Here is a bar chart. Because it contains a single series (or data set), any styling attributes added to the "plot" or "series" object would apply across all the bars.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "background-color": "red"
  },
  "scale-x": {
    "labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
  },
  "scale-y": {
    "values": "0:20:5"
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }]
}

Node

But with this kind of data set, you may want to style the bars by node index (or individual data point). To do this, create a "styles" array. In the array, provide your color values by name, hexadecimal, or RGB notation. You can also create an array of objects for more complex styling. See the below Styles Array section for more information. Make sure the number of values corresponds to the number of data points in your chart. (Unspecified data points will otherwise default back to ZingChart's color scheme.)

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"bar",
  "plot":{
    "styles":["red","#ff6666","#ff99cc","#cc99ff","#6699ff","blue"]
  },
  "scale-x":{
    "labels":["Alice","Brett","Chris","Donna","Emily","Frank"]
  },
  "scale-y":{
    "values":"0:20:5"
  },
  "series":[
    {"values":[3,4,11,5,19,7]}
  ]  
}

Styling Attributes

What styling attributes to apply varies depending on the chart type. However, there are four basic styling attribute groups: backgrounds, borders, lines, and markers. Bar and pie charts, for example, are made up of backgrounds and borders. Line charts are made up of lines and markers. Scatter charts are made up of markers, and so on.

Background

Backgrounds are specified with the "background-color" attribute. Provide a hexadecimal or RGB color value. You can also use the "alpha" attribute to adjust the background transparency levels. Provide a value between 0-1, and make sure the decimal point is preceded by a zero.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "layout":"1x2",
  "graphset":[
    {
      "type":"bar",
      "plot":{
        "background-color":"pink"
      },
      "series":[
        {"values":[31,16,35,5,59,33]}
      ]
    },
    {
      "type":"pie",
      "plot":{
        "background-color":"pink",
        "value-box":{
          "placement":"out",
          "font-color":"gray",
          "font-size":12,
          "font-weight":"normal"
        }
      },
      "series": [
        {
          "values":[30],
          "background-color":"pink"
        },
        {
          "values":[34],
          "background-color":"orange"
        },
        {
          "values":[15],
          "background-color":"green"
        },
        {
          "values":[14],
          "background-color":"gray"
        },
        {
          "values":[5],
          "background-color":"purple"
        }
      ]
    }
  ]
}

You can add some variation by incorporating gradients into the background. In the "background-color" attribute, provide two color values to create a horizontal gradient. Refer to the Plot/Series JSON Attributes/Syntax page for additional gradient customization attributes.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "layout":"1x2",
  "graphset":[
    {
      "type":"bar",
      "plot":{
        "background-color":"orange pink"
      },
      "series":[
        {"values":[31,16,35,5,59,33]}
      ]
    },
    {
      "type":"pie",
      "plot":{
        "background-color":"orange pink",
        "value-box":{
          "placement":"out",
          "font-color":"gray",
          "font-size":12,
          "font-weight":"normal"
        }
      },
      "series": [
        {
          "values":[30],
          "offset-r":"15%",
          "background-color":"red orange"
        },
        {"values":[34]},
        {"values":[15]},
        {"values":[14]},
        {"values":[5]}
      ]
    }
  ]
}

Patterns are another way to fill in your background. This is an especially useful option when you want to create black and white charts, or charts without color.

Note: Patterns require the pattern module. Refer to the Patterns Tutorial for more information, as well as a list of the available patterns.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "layout":"1x2",
  "graphset":[
    {
      "type":"bar",
      "plot":{
        "background-color":"none",
        "border-width":1,
        "border-color":"black",
        "background-image":"PATTERN_DIAGONAL_BRICK"
      },
      "series":[
        {"values":[31,16,35,5,59,33]}
      ]
    },
    {
      "type":"pie",
      "plot":{
        "offset-r":"7%",
        "background-color":"none",
        "border-width":1,
        "border-color":"black",
        "value-box":{
          "placement":"out",
          "font-color":"gray",
          "font-size":12,
          "font-weight":"normal"
        }
      },
      "series": [
        {
          "values":[30],
          "background-image":"PATTERN_SHINGLE"
        },
        {
          "values":[34],
          "background-image":"PATTERN_SOLID_DIAMOND"
        },
        {
          "values":[15],
          "background-image":"PATTERN_VERTICAL"
        },
        {
          "values":[14],
          "background-image":"PATTERN_WEAVE"
        },
        {
          "values":[5],
          "background-image":"PATTERN_DARK_HORIZONTAL"
        }
      ]
    }
  ]
}

Border

Backgrounds can generally be enclosed by borders. Borders apply to closed shapes such as bar and pie charts. Border attributes include "border-color", "border-width", "border-radius", and "line-style". (This last attribute can be used with both borders and lines.) There can be some confusion between borders and lines, so refer to the applicable chart types page for information on which styling attributes (borders, lines, both) apply.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"bar",
  "plot":{
    "border-color":"#ff00ff",
    "border-width":2,
    "border-radius":"5px",
    "line-style":"dashdot"
  },
  "series":[
    {"values":[31,16,35,5,59,33]}
  ]
}

Line

Lines apply to non-closed shapes, specifically charts with lines (line, area, range, OHLC). Line attributes include "line-color", "line-width", and "line-style". (This last attribute can be used with both lines and borders.) In the below line chart, note that the markers remain unstyled. They are their own separate group, discussed in the following section.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"line",
  "plot":{
    "line-color":"#ff00ff",
    "line-width":2,
    "line-style":"dashed"
  },
  "series":[
    {"values":[30,34,15,21,19,29,32]}
  ]
}

Marker

Markers are a component of many chart types (line, area, range, scatter, bubble). They must be styled separately in a "marker" object. They can also be turned off (in the "marker" object, add a "visible":false attribute). Refer to the Marker JSON Attributes/Syntax page for a full list of styling options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"line",
  "plot":{
    "marker":{
      "background-color":"#ff00ff",
      "size":7,
      "border-color":"#0000ff",
      "border-width":1
    }
  },
  "series":[
    {"values":[30,34,15,21,19,29,32]}
  ]
}

ZingChart markers appear as circles by default. However, you can customize the type so they display as squares, diamonds, stars, and so on. Click through the marker type options in the below chart. Based on ZingChart Shapes, refer to that document for information on shape-specific styling.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styles Array

The "styles" array allows you to style the chart by node index. Depending on the chart type, you can use a simple array or an array of objects to specify the styling.

Array

A simple "styles" array suffices for chart types that have a single styling attribute, such as bar charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "styles": ["red", "orange", "yellow", "green", "blue", "purple"]
  },
  "scale-x": {
    "labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
  },
  "scale-y": {
    "values": "0:20:5"
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }]
}

The "series" array is not limited to single series charts. It can be applied across charts with multiple data sets, like in the below bar chart. Notice how the bars are colored according to node index.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "styles": ["red", "orange", "yellow", "green", "blue", "purple"]
  },
  "scale-x": {
    "labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
  },
  "scale-y": {
    "values": "0:30:10"
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Furthermore, by moving "styles" arrays into individual "series" objects, you can specify color values for every single node. Note that you can place the arrays in the "plot" and/or "series" objects to achieve the appearance that you want.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "scale-x": {
    "labels": ["Alice", "Brett", "Chris", "Donna", "Emily", "Frank"]
  },
  "scale-y": {
    "values": "0:30:10"
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7],
    "styles": ["red", "orange", "yellow", "green", "blue", "purple"]
  }, {
    "values": [9, 19, 15, 25, 12, 14],
    "styles": ["#ff6666", "#ffc966", "#ffff66", "#66ff66", "#6666ff", "#ff66ff"]
  }, {
    "values": [15, 29, 19, 21, 25, 26],
    "styles": ["#ffcccc", "#ffedcc", "#ffffcc", "#ccffcc", "#ccccff", "#ffccff"]
  }]
}

Array of Objects

The "styles" array of objects allow you to specify multiple styling attributes per node. In the array, create an object for each node index. In each object, place the styling attributes you want applied. Create additional "styles" array of objects for the "marker" object (see the below area chart), "goal" object (for bullet charts), and more.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"area",
  "plot":{
    "styles":[
      { //Node Index 0
        "line-color":"pink",
        "line-style":"dashdot",
        "background-color":"pink"
      },
      { //Node Index 1
        "line-color":"red",
        "line-style":"dotted",
        "background-color":"red"
      },
      { //Node Index 2
        "line-color":"orange",
        "line-style":"dashed",
        "background-color":"orange"
      },
      { //Node Index 3
        "line-color":"green",
        "line-style":"dashdot",
        "background-color":"green"
      },
      { //Node Index 4
        "line-color":"blue",
        "line-style":"dotted",
        "background-color":"blue"
      },
      { //Node Index 5
        "line-color":"purple",
        "line-style":"dashed",
        "background-color":"purple"
      }
    ],
    "marker":{
      "styles":[
        { //Node Index 0
          "background-color":"pink",
          "border-color":"pink"
        },
        { //Node Index 1
          "background-color":"red",
          "border-color":"red"
        },
        { //Node Index 2
          "background-color":"orange",
          "border-color":"orange"
        },
        { //Node Index 3
          "background-color":"green",
          "border-color":"green"
        },
        { //Node Index 4
          "background-color":"blue",
          "border-color":"blue"
        },
        { //Node Index 5
          "background-color":"purple",
          "border-color":"purple"
        }
      ]
    }
  },
  "series":[
    {"values":[3,4,11,5,19,7]}
  ]
}

The "styles" array of objects can be applied across multi-series charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"area",
  "plot":{
    "styles":[
      { //Node Index 0
        "line-color":"pink",
        "line-style":"dashdot",
        "background-color":"pink"
      },
      { //Node Index 1
        "line-color":"red",
        "line-style":"dotted",
        "background-color":"red"
      },
      { //Node Index 2
        "line-color":"orange",
        "line-style":"dashed",
        "background-color":"orange"
      },
      { //Node Index 3
        "line-color":"green",
        "line-style":"dashdot",
        "background-color":"green"
      },
      { //Node Index 4
        "line-color":"blue",
        "line-style":"dotted",
        "background-color":"blue"
      },
      { //Node Index 5
        "line-color":"purple",
        "line-style":"dashed",
        "background-color":"purple"
      }
    ],
    "marker":{
      "styles":[
        { //Node Index 0
          "background-color":"pink",
          "border-color":"pink"
        },
        { //Node Index 1
          "background-color":"red",
          "border-color":"red"
        },
        { //Node Index 2
          "background-color":"orange",
          "border-color":"orange"
        },
        { //Node Index 3
          "background-color":"green",
          "border-color":"green"
        },
        { //Node Index 4
          "background-color":"blue",
          "border-color":"blue"
        },
        { //Node Index 5
          "background-color":"purple",
          "border-color":"purple"
        }
      ]
    }
  },
  "series":[
    {"values":[3,4,11,5,19,7]},
    {"values":[9,19,15,25,12,14]},
    {"values":[15,29,19,21,25,26]}
  ]
}

And you can style by individual node by moving the "styles" array of objects into individual "series" objects. The below chart was made into a stacked area chart to more easily display the node-specific styling.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"area",
  "plot":{
    "stacked":true
  },
  "series":[
    {
      "values":[3,4,11,5,19,7],
      "styles":[
        { //Node Index 0
          "line-color":"pink",
          "line-style":"dashdot",
          "background-color":"pink"
        },
        { //Node Index 1
          "line-color":"red",
          "line-style":"dotted",
          "background-color":"red"
        },
        { //Node Index 2
          "line-color":"orange",
          "line-style":"dashed",
          "background-color":"orange"
        },
        { //Node Index 3
          "line-color":"green",
          "line-style":"dashdot",
          "background-color":"green"
        },
        { //Node Index 4
          "line-color":"blue",
          "line-style":"dotted",
          "background-color":"blue"
        },
        { //Node Index 5
          "line-color":"purple",
          "line-style":"dashed",
          "background-color":"purple"
        }
      ],
      "marker":{
        "styles":[
          { //Node Index 0
            "background-color":"pink",
            "border-color":"pink"
          },
          { //Node Index 1
            "background-color":"red",
            "border-color":"red"
          },
          { //Node Index 2
            "background-color":"orange",
            "border-color":"orange"
          },
          { //Node Index 3
            "background-color":"green",
            "border-color":"green"
          },
          { //Node Index 4
            "background-color":"blue",
            "border-color":"blue"
          },
          { //Node Index 5
            "background-color":"purple",
            "border-color":"purple"
          }
        ]
      }
    },
    {
      "values":[9,19,15,25,12,14],
      "styles":[
        { //Node Index 0
          "line-color":"purple",
          "line-style":"dashed",
          "background-color":"purple"
        },
        { //Node Index 1
          "line-color":"pink",
          "line-style":"dashdot",
          "background-color":"pink"
        },
        { //Node Index 2
          "line-color":"red",
          "line-style":"dotted",
          "background-color":"red"
        },
        { //Node Index 3
          "line-color":"orange",
          "line-style":"dashed",
          "background-color":"orange"
        },
        { //Node Index 4
          "line-color":"green",
          "line-style":"dashdot",
          "background-color":"green"
        },
        { //Node Index 5
          "line-color":"blue",
          "line-style":"dotted",
          "background-color":"blue"
        }
      ],
      "marker":{
        "styles":[
          { //Node Index 0
            "background-color":"purple",
            "border-color":"purple"
          },
          { //Node Index 1
            "background-color":"pink",
            "border-color":"pink"
          },
          { //Node Index 2
            "background-color":"red",
            "border-color":"red"
          },
          { //Node Index 3
            "background-color":"orange",
            "border-color":"orange"
          },
          { //Node Index 4
            "background-color":"green",
            "border-color":"green"
          },
          { //Node Index 5
            "background-color":"blue",
            "border-color":"blue"
          }
        ]
      }
    },
    {
      "values":[15,29,19,21,25,26],
      "styles":[
        { //Node Index 0
          "line-color":"blue",
          "line-style":"dotted",
          "background-color":"blue"
        },
        { //Node Index 1
          "line-color":"purple",
          "line-style":"dashed",
          "background-color":"purple"
        },
        { //Node Index 2
          "line-color":"pink",
          "line-style":"dashdot",
          "background-color":"pink"
        },
        { //Node Index 3
          "line-color":"red",
          "line-style":"dotted",
          "background-color":"red"
        },
        { //Node Index 4
          "line-color":"orange",
          "line-style":"dashed",
          "background-color":"orange"
        },
        { //Node Index 5
          "line-color":"green",
          "line-style":"dashdot",
          "background-color":"green"
        }
      ],
      "marker":{
        "styles":[
          { //Node Index 0
            "background-color":"blue",
            "border-color":"blue"
          },
          { //Node Index 1
            "background-color":"purple",
            "border-color":"purple"
          },
          { //Node Index 2
            "background-color":"pink",
            "border-color":"pink"
          },
          { //Node Index 3
            "background-color":"red",
            "border-color":"red"
          },
          { //Node Index 4
            "background-color":"orange",
            "border-color":"orange"
          },
          { //Node Index 5
            "background-color":"green",
            "border-color":"green"
          }
        ]
      }
    }
  ]
}

State Types

There are different "states," or ways your data can appear under different conditions. ZingChart currently has a default state, hover state, selected state, non-selected (or background) state, and legend highlight state.

Note: Our ZingChart library offers over twenty different chart types. What styling attributes you apply depends on what chart type you are creating. That said, the "background-color" attribute, "border-color" attribute (for closed shapes), "line-color" attribute (for non-closed shapes), and "marker" object (with applicable attributes placed inside) are most commonly used across our chart types.

Default State

The default state is what users see when simply viewing your chart. Styling attributes are placed directly in the "plot" and/or "series" object(s). In the below bar chart, the bars are colored in a red-orange gradient. (Providing two color values in a "background-color" attribute creates a horizontal gradient by default. See our Plot/Series JSON Attributes/Syntax page for more complex gradient options.)

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "background-color": "red orange"
  },
  "series": [{
    "values": [3, 4, 9, 10, 5, 7]
  }]
}

In the below scatter plot, the markers are styled to appear lime green with raspberry borders. Markers require their own objects. The "marker" object is placed in the "plot" and/or "series" object(s) depending on whether you want the styling to apply globally or locally. The styling attributes you want applied ("background-color", "border-width", "border-color") are then placed inside. Refer to the Marker JSON Attributes/Syntax page for a full list of attribute options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "scatter",
  "plot": {
    "marker": {
      "background-color": "#99ff33",
      "border-width": 1,
      "border-color": "#ff0066"
    }
  },
  "series": [{
    "values": [
      [1, 0.3],
      [1.3, 1.3],
      [1.4, 1.4],
      [1.6, 1.7],
      [1.7, 1.5],
      [1.8, 1.9],
      [1.9, 1.5],
      [2, 0.9],
      [2.1, 0.5],
      [2.2, 1.1],
      [2.3, 0.4],
      [2.4, 0.3],
      [2.5, 0.7],
      [2.6, 2.1],
      [2.7, 2.5],
      [2.8, 2.6],
      [2.9, 2],
      [3, 1.9],
      [3.1, 1.5],
      [3.2, 2],
      [3.3, 1.4],
      [3.4, 1.9],
      [3.5, 3],
      [3.6, 3.4],
      [3.7, 3.3]
    ]
  }]
}

Hover State

The "hover-state" and "hover-marker" objects allow you to specify how data points appear when a user hovers over them. You may need one or both objects depending on the chart type. Area charts, for example, require both a "hover-state" and "hover-marker" object. Note that all marker-specific attributes are placed in the latter. Hover over the data points to see the change.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "scale-y": {
    "values": "0:10:2"
  },
  "plot": {
    "hover-state": {
      "line-color": "white",
      "alpha": 1,
      "background-color": "pink",
      "alpha-area": 0.5
    },
    "hover-marker": {
      "type": "star5",
      "size": 10,
      "background-color": "#FFCCFF #66CCFF"
    }
  },
  "series": [{
    "values": [3, 4, 7, 9, 7, 4, 3]
  }]
}

You can specify the hover mode for this state type by adding a "hover-mode" attribute and setting the value to "node" (default) or "plot". See the difference in the below two charts. Bar charts (hover over the bars below to see the change) require only a "hover-state" object since they have no markers. In addition to "background-color", you can style their "border-width", "border-color", "line-style", and more. In this chart, the hover mode is set to the default "node" value, which means that the styling will apply to only a single data point (or node) at a time.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "hover-mode": "node",
    "hover-state": {
      "background-color": "purple green"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Here, the hover mode is set to "plot". That means that when you hover over a data point (or node), the hover styling will apply across that selected series (or data set).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "hover-mode": "plot",
    "hover-state": {
      "background-color": "purple green"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Refer to the Hover-State JSON Attributes/Syntax page and Hover-Marker JSON Attributes/Syntax page for more attribute options.

Selected State

The "selected-state" and "selected-marker" objects allow you to set how data points appear when a user clicks on them. Use one or both objects depending on your chart type. This state also requires you to specify the selection mode. Add a "selection-mode" attribute to the "plot" object. Value options are "none" (default), "multiple", "plot", and "graph".

In the below bubble chart, the selection mode is set to "multiple". This means you can select multiple data points on your chart. Since bubble charts are composed of markers, the styling attributes are placed in a "selected-marker" object. Each selected marker will turn raspberry peach. Click the bubbles below.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble",
  "plot": {
    "selection-mode": "multiple",
    "selected-marker": {
      "background-color": "#ff0066 #ff9999"
    }
  },
  "series": [{
    "values": [
      [0.5, 5, 14],
      [1.9, 5, 33],
      [2.5, 10, 35],
      [3.1, 30, 80],
      [5.5, 45, 87],
      [5.9, 74, 101],
      [6.2, 50, 15],
      [6.8, 56, 21],
      [7, 61, 30],
      [7.5, 71, 34]
    ]
  }]
}

You can also set the selection mode to "plot" or "graph". See the difference in the below two bar charts. Styling attributes are placed in a "selected-state" object. The selected bars will turn pink with thick dash and dot brown borders. In this chart, the selection mode is set to "plot". That means one bar per series (or data set) can be selected at a time.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "selection-mode": "plot",
    "selected-state": {
      "background-color": "pink",
      "border-width": 5,
      "border-color": "brown",
      "line-style": "dashdot"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Here, the selection mode is set to "graph". That means only one bar can be selected at a time throughout the entire chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "selection-mode": "graph",
    "selected-state": {
      "background-color": "pink",
      "border-width": 5,
      "border-color": "brown",
      "line-style": "dashdot"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Refer to the Selected-State JSON Attributes/Syntax page and Selected-Marker JSON Attributes/Syntax page for more attribute options.

Non-Selected (or Background) State

The "background-state" and "background-marker" objects allow you to style non-selected (or background) data points. Use one or both objects depending on your chart type. They are often used with the above "selection-state" and/or "selection-marker" objects, since you can specify how both selected and non-selected data points appear.

Note: You must specify a selection mode. Add a "selection-mode" attribute to the "plot" object. Provide a value of "multiple", "plot", or "graph". (The default value is "none".)

In the below stock chart, styling attributes were added to a "background-state" object to make the non-selected trading days appear raspberry pink. Click the candlesticks to see the change.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "plot": {
    "selection-mode": "multiple",
    "background-state": {
      "background-color": "#ff0080",
      "border-color": "#ff0080",
      "line-color": "#ff0080"
    }
  },
  "scale-y": {
    "values": "34:37:1"
  },
  "series": [{
    "values": [
      [34.88, 35.21, 34.80, 35.21],
      [35.22, 35.30, 35.10, 35.17],
      [35.12, 35.45, 35.09, 35.39],
      [35.45, 36.06, 35.44, 35.91],
      [35.94, 36.01, 35.81, 35.89],
      [35.83, 36.27, 35.75, 35.99],
      [35.88, 36.12, 35.85, 36.11],
      [36.05, 36.08, 35.78, 35.86],
      [35.76, 35.77, 35.47, 35.66],
      [35.62, 35.82, 35.57, 35.82],
      [35.71, 35.78, 35.33, 35.42],
      [35.52, 35.70, 35.49, 35.64],
      [35.50, 35.64, 35.17, 35.17],
      [35.28, 35.49, 35.13, 35.19],
      [35.27, 35.41, 35.17, 35.40],
      [35.28, 35.36, 34.81, 35.04]
    ]
  }]
}

You can specify the background mode of unselected data points. Add a "background-mode" attribute and set the value to "plot" (default) or "graph". See the difference in the below two charts. Styling attributes are placed in a "background-state" object. The non-selected bars will appear orange-yellow with dotted purple borders. In this chart, the background mode is set to "plot". That means the non-selected styling will apply to the selected series (or data set).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
    "selection-mode": "multiple",
    "background-mode": "plot",
    "background-state": {
      "background-color": "orange yellow",
      "border-width": 1,
      "border-color": "purple",
      "line-style": "dotted"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Here, the background mode is set to "graph". That means the non-selected styling will apply across the entire chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bar",
  "plot": {
  "selection-mode": "multiple",
    "background-mode": "graph",
    "background-state": {
      "background-color": "orange yellow",
      "border-width": 1,
      "border-color": "purple",
      "line-style": "dotted"
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Refer to the Background-State JSON Attributes/Syntax page and Background-Marker JSON Attributes/Syntax page for more attribute options.

Legend Highlight State

The "highlight-state" and "highlight-marker" objects allow you to specify how data points appear when a user hovers over the corresponding series in the legend. Depending on your chart type, you would use one or both objects. Make sure a legend is added to your chart. (Simply create a "legend" object. Refer to the Legend Tutorial for more information on customizing and styling the legend.)

This state requires you to add a "highlight" attribute to the "plot" object or a "highlight-plot" attribute to the "legend" object. Set the value to true. In the below pie chart, you can see how the legend highlight feature works when you hover over the series items in the legend. The corresponding pie slices will light up to appear lime-purple with thick dash and dot borders.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pie",
  "legend": {
    "highlight-plot": true
  },
  "plot": {
    "highlight-state": {
      "background-color": "#ccccff #ccff33",
      "border-width": 5,
      "border-color": "#6666ff",
      "line-style": "dashdot"
    }
  },
  "series": [{
    "values": [30]
  }, {
    "values": [34]
  }, {
    "values": [15]
  }, {
    "values": [14]
  }, {
    "values": [5]
  }]
}

Line charts require both a "highlight-state" and "highlight-marker" object. Note that all marker-specific attributes are placed in the latter. Hover over the series items in the legend to see the change.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "legend": {
    "highlight-plot": true
  },
  "plot": {
    "highlight-state": {
      "line-color": "black",
      "line-width": 3,
      "line-style": "dashdot"
    },
    "highlight-marker": {
      "type": "gear5",
      "size": 7,
      "background-color": "black white",
      "border-width": 3,
      "border-color": "black",
      "shadow": false
    }
  },
  "series": [{
    "values": [3, 4, 11, 5, 19, 7]
  }, {
    "values": [9, 19, 15, 25, 12, 14]
  }, {
    "values": [15, 29, 19, 21, 25, 26]
  }]
}

Refer to the Highlight-State JSON Attributes/Syntax page and Highlight-Marker JSON Attributes/Syntax page for more attribute options.

Summary

Got a question on plot/series styling? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.