Bar Charts

Overview

A bar chart or bar graph displays quantitative information through bars that are vertically or horizontally oriented. At ZingChart, a vertical bar chart is our default chart type; it is also known as a column chart. We also support horizontal bar charts, 3-D column charts, 3-D horizontal bar charts, trellis bar charts, and floating bar charts. All of our charts support single or multiple data sets. They can be modified to display (in lieu of rectangular bars) cylinders, cones, pyramids, or histograms. You can position data sets on top of each other to create standard stacked or 100% stacked column/bar charts. You can also configure their scales (category scales, time-series scale); customize their bar fills, borders, and corners; and more. See our Bar Chart Gallery for further ideas and inspiration.

Bar Chart Types

To specify your chart type, use the type attribute. We have four different bar chart types: column charts (bar or vbar), 3-D column charts (bar3d or vbar3d), horizontal (hbar), and 3-D horizontal bars (hbar3d). We also explain how to create trellis bar charts and floating bar charts.

Note: You can modify your charts to create stacked bar (standard stacked and 100% stacked) and/or charts with different aspects (cylinders, cones, pyramids, histograms). How to do this is explained in our Chart-Specific Properties section below.

Column Chart

Column charts (or vertical bar) are our default bar chart type. They are specified by the bar or vbar value. You can modify their bars so that they appear rectangular (default), conical, or as histograms. They can be stacked to display as standard stacked or 100% stacked column charts.

https://app.zingsoft.com/demos/embed/QJHGFJ37
https://app.zingsoft.com/demos/embed/QJHGFJ37
{
  type: 'bar', /* or "vbar" */
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

3-D Column Chart

Three-dimensional column charts are specified by the bar3d or vbar3d value. The bars are vertically oriented. You can use a 3d-aspect object to display the chart in a true 3-D (default) or isometric view, as well as change the chart’s angle, depth, and zoom. See our 3-D Charts page for more information.

https://app.zingsoft.com/demos/embed/JU9FN52E
https://app.zingsoft.com/demos/embed/JU9FN52E
{
  type: "bar3d", /* or "vbar3d" */
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]},
    ]
}

Horizontal Bar Chart

Horizontal bar charts are specified by the hbar value. With this chart type, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally.

https://app.zingsoft.com/demos/embed/LO7GG3JG
https://app.zingsoft.com/demos/embed/LO7GG3JG
{
  type: "hbar",
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

3-D Horizontal Bar Chart

Our three-dimensional horizontal bar charts are specified by the hbar3d value. By adding a 3d-aspect object, you can modify them to display in a true 3-D (default) or isometric view, as well as change the chart’s angle, depth, and zoom. Our 3-D Charts page provides further information.

https://app.zingsoft.com/demos/embed/5X587DWF
https://app.zingsoft.com/demos/embed/5X587DWF
{
  type: "hbar3d",
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Trellis Bar Chart

When you have multiple data sets, trellis column charts are another way (in addition to grouped bar and stacked bar) to display the information. With a trellis chart, your data sets are separated into a grid of smaller charts. Each chart contains its own data set. You can create a trellis column or bar chart by inserting individual chart objects into a graphset array. Read our Adding Additional Charts page for a fuller explanation on this chart type.

https://app.zingsoft.com/demos/embed/BNVF76DL
https://app.zingsoft.com/demos/embed/BNVF76DL
{
  graphset: [
    {
      type: 'bar', /* Specify your chart type. */
      height: "100%",
      width: "33.33%",
      x: "0%",
      y: "0%",
      series: [{ values: [20,40,25,50,15,45,33,34]}]
    },
    {
      type: 'bar',
      height: "100%",
      width: "33.33%",
      x: "33.33%",
      y: "0%",
      series: [{ values: [5,30,21,18,59,50,28,33]}]
    },
    {
      type: 'bar',
      height: "100%",
      width: "33.33%",
      x: "66.66%",
      y: "0%",
      series: [{ values: [30,5,18,21,33,41,29,15]}]
    }
  ]
}

Floating Bar Chart

While not its own chart type, ZingChart provides the functionality to create floating bar charts. They can be vertically or horizontally oriented, depending on whether you prefer to creating a floating column chart or floating bar chart. First, specify your chart type (bar, bar3d, hbar, hbar3d). Next, go to your series array. You’ll need to specify your offset values, which will allow you to control the starting points of your bars. In each data object, add an offset-values array. Provide your values.

https://app.zingsoft.com/demos/embed/WQVUR0EM
https://app.zingsoft.com/demos/embed/WQVUR0EM
{
  type: 'bar', /* Specify your chart type. */
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      'offset-values': [0,3,5,15,28,30,4,9] /* Specify your offset values. */
    }
  ]
}

You can access the offset-values through the %offset-values token.

https://app.zingsoft.com/demos/embed/WKO2QQYZ
https://app.zingsoft.com/demos/embed/WKO2QQYZ
{
  ...
  tooltip: {
    text: 'offset: %offset-values
 value: %v',
    textAlign: 'left'
  },
  ...
}

Series Data

Bar charts support single or multiple data sets. You can also use null values to indicate missing or unavailable data, as well as array of arrays to represent time-series data.

Single Data Set

Single data set charts are sometimes referred to as a simple column or bar chart.

Note: When working with single data set column and bar, you may find that typical styling methods (like bar fill) won’t result in the appearance that you want. You have to color by node, which we explain in our Bar Fill by Node section below

series: [    /* Simple Bar Chart */
    { values: [y0, y1, y2, y3, ..., yN]}
]

Multiple Data Sets

Multiple data set charts are sometimes referred to as a grouped column or bar chart.

series: [    /* Grouped Bar Chart */
    { values: [y0, y1, y2, y3, ..., yN]},
    { values: [y0, y1, y2, y3, ..., yN]},
    { values: [y0, y1, y2, y3, ..., yN]},
]

Array with Null Values

When you have missing or unavailable data, you can use an array with null values.

Note: Using zero values (instead of null) results in a similarly appearing chart. The difference is that zero values come with tooltips and null values do not. In the chart below, hover over the x-axis line at plot indices 0 and 1 (null values with no tooltips) and 6 and 7 (values set to 0, with tooltips) to see the difference.

https://app.zingsoft.com/demos/embed/NBT446L0
https://app.zingsoft.com/demos/embed/NBT446L0
series: [
    { values: [20,40,25,50,15,45,0,0]}, /* Data set with zero values */
    { values: [null,null,21,18,59,50,28,33]} /* Data set with null values */
]

Array of Arrays

An array of arrays can be useful, especially when working with time-series data. For your data, you need to specify your x-axis values in Unix time (in milliseconds). In the time-series bar chart below, the Unix timestamps dictate where values are placed along the x-axis.

Note: In addition to your data, you need to configure your time-series scale. See our Time-Series Scale section further below, which explains how to set up your scale object to include a min-value attribute, step attribute, and transform object.

You also need to add a utc attribute, with the value set to true This will make your values read in UTC time.

https://app.zingsoft.com/demos/embed/AEZ6T8HY
https://app.zingsoft.com/demos/embed/AEZ6T8HY
{
    type: 'bar',
    utc: true, /* Set to UTC time. */
    'scale-x': { /* Scale object, set up to display as a time-series scale. Read our Time-Series Scale section further below for more information. */
        'min-value': 1420070400000,
        step: "day",
        transform: {
            type: "date",
            all: "%M %d, %Y"
        }
    },
    series: [
        { values: [    /* Array of arrays, with Unix timestamps */
                [1420089129000,20],
                [1420103703000,40],
                [1420146903000,25],
                [1420175525000,50],
                [1420200725000,15],
                [1420315925000,45],
                [1420326312000,33],
                [1420329030000,34]
        ]},
        { values: [    /* Array of arrays, with Unix timestamps */
                [1420501830000,5],
                [1420523430000,30],
                [1420588230000,21],
                [1420671905000,18],
                [1420700705000,59],
                [1420747505000,50],
                [1420797905000,28],
                [1420921800000,33]
        ]}
    ]
}

Chart-Specific Properties

ZingChart allows you to change the appearance of your bars. They can display as histograms, cones, cylinders (3-D only), and pyramids (3-D only). You can also stack two or more data sets on top of each other to create standard a stacked or 100% stacked bar, as well as separate out data into multiple stacks.

Aspect

The aspect attribute allows you to change the appearance of your bars so that they appear rectangular (default), conical (cone), cylindrical (cylinder), pyramidal (pyramid), or as histograms (histogram). (The cylinder and pyramid aspects are only visible on three-dimensional charts.) Our aspects can be applied globally to affect all plots or locally to affect specific plots.

To apply aspects globally, create a plot object. Insert your aspect attribute.

Note: The example below lists this chart’s default properties, which are rectangular bars and unstacked data sets. (We explain how to create stacked bar in the sections below.)
plot: {                /* Plot object */
    aspect: 'bar',        /* "cone" | "cylinder" | "pyramid" | "histogram" */
    stacked: false        /* or true */
}

To apply aspects locally, add them to the chart data object you want the change to apply to.

Note: If you specify an aspect value in the plot object and an aspect value in a chart data object, the latter will overwrite the former.
series: [
    {    /* Chart data object */
        aspect: "bar, "
        values: [y0, y1, y2, y3, ..., yN]
    },
    {    /* Chart data object */
        aspect: "cone",
        values: [y0, y1, y2, y3, ..., yN]
    },
    {    /* Chart data object */
        aspect: "histogram",
        values: [y0, y1, y2, y3, ..., yN]
    }
]

Rectangle Bar Chart

Rectangular bars are our default aspect, and so specifying their type in a plot object (as shown below) is optional. They are useful for displaying and comparing quantitative information between categories.

Note: This chart is shown in 3-D for easy comparison to the next aspect (cylinder), which isn’t visible unless in 3-D mode.
https://app.zingsoft.com/demos/embed/PFRBYY2X
https://app.zingsoft.com/demos/embed/PFRBYY2X
{
  type: "bar3d",
  plot: {
    aspect: "bar"
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Cylinder Bar Chart

For three-dimensional column (bar3d) and horizontal bar (hbar3d) charts, you can use cylindrical bars to represent your data. Add an aspect attribute to your plot object, and set the value to cylinder.

https://app.zingsoft.com/demos/embed/1AAJ5J2X
https://app.zingsoft.com/demos/embed/1AAJ5J2X
{
  type: "bar3d",
  plot: {
    aspect: "cylinder",
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Cone Bar Chart

To display cones in your chart, insert an aspect attribute into your plot object. Set the value to cone.

Note: This chart is shown in 3-D for easy comparison to the next aspect (pyramid), which isn’t visible unless in 3-D mode.
https://app.zingsoft.com/demos/embed/P6YHL93A
https://app.zingsoft.com/demos/embed/P6YHL93A
{
  type: "bar3d",
  plot: {
    aspect: "cone"
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Pyramid Bar Chart

You can use pyramid bars to represent your data when working with 3-D column (bar3d) or horizontal bar (hbar3d) charts. Place an aspect attribute inside your plot object. Set the value to pyramid.

https://app.zingsoft.com/demos/embed/80TI8ETZ
https://app.zingsoft.com/demos/embed/80TI8ETZ
{
  type: "bar3d",
  plot: {
    aspect: "pyramid"
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Histogram Bar Chart**

A histogram bar chart displays your data as a series of joined bars. Sometimes called a joined or stepped bar chart, this chart type is useful for emphasizing abrupt changes in your data. To use a histogram, add an aspect attribute to your plot object. Set the value to histogram.

https://app.zingsoft.com/demos/embed/HFTBY63X
https://app.zingsoft.com/demos/embed/HFTBY63X
{
  type: 'bar',
  plot: {
    aspect: "histogram"
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Stacked

The stacked attribute allows you to stack multiple data sets on top of each other. With this chart type, you can create a standard stacked bar or 100% stacked bar, as well as specify which data sets are sorted into which stacks. To get started, add a stackedattribute to your plot object, and set the value to true. (By default, the value is set to false.) To specify your stack type, add a stack-type attribute. You can set the value to normal (default) or 100%.

Standard Stacked Bar Chart

In a standard stacked column or bar chart, the data sets are placed on top of each other so that the top of the column represents the sum total of all the stacked data. Make sure your stacked attribute is set to true and your stack-type attribute is set to normal.

Note: As the default stacked chart type, including the `stack-type` attribute is optional.
https://app.zingsoft.com/demos/embed/RIMFUD28
https://app.zingsoft.com/demos/embed/RIMFUD28
{
  type: 'bar',
  plot: {
    stacked: true,
    'stack-type': "normal" /* Optional specification */
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

100% Stacked Bar Chart

In a 100% stacked column or bar chart, the stacks do not represent actual quantitative values. Instead, each data layer represents a percentage of the whole and each stack totals at 100%. To create one, make sure your stacked attribute is set to true. For your stack-type attribute, set the value to 100%.

Note: Since this chart type always ranges from 0-100, make sure to specify your minimum and maximum values on the y-axis. Create a `scale-y` object. Insert a `min-value` and `max-value` attribute, and set the values to `0` and `100` respectively.
https://demos.zingchart.com/view/UDXRONIG
https://demos.zingchart.com/view/UDXRONIG
{
  type: 'bar',
  plot: {
    stacked: true,
    'stack-type': "100%"
  },
  'scale-y': {
    'min-value':0,
    'max-value':100
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]},
    { values: [30,5,18,21,33,41,29,15]}
    ]
}

Additional Chart Stacking Options

You can create multiple stacks for your column or bar chart. In your plot object, make sure your stacked attribute is set to true. Next, go to your series array. In each data set, add a stack attribute. For data sets you want included in the first stack, set the value to 1. For data sets you want included in the second stack, set the value to 2, and so on. See the example chart below, where the first two data sets were assigned to the first stack and the third data set was assigned to the second stack.

https://demos.zingchart.com/view/DS399S77
https://demos.zingchart.com/view/DS399S77
{
  type: 'bar',
  plot: {
    stacked: true,
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      stack:1
    },
    {
      values: [5,30,21,18,59,50,28,33],
      stack:1
    },
    {
      values: [30,5,18,21,33,41,29,15],
      stack:2
    }
    ]
}

Further Customization

After you’ve set up your basic chart, the next step is to customize and style it. This section goes over how to configure your scales, as well as how to style your bar fills, borders, corners, and hover states.

Scales

ZingChart’s default scales for both the x- and y-axis is a quantitative one, with the values starting at zero. Once your basic chart is set up, you’ll most likely want to modify your scale-x object, which corresponds to the horizontal axis on column charts and the vertical axis on horizontal bars. Column charts generally have a category or time-series scale on their x-axis. Horizontal bar charts usually have a category scale. We explain how to set up both scale types below.

Category Scale

Category scales can display names, dates, events, locations, and more. They can consist of any word and/or number combination, and are generally placed on the horizontal axis for column charts and on the vertical axis for horizontal bars. To create a category scale, add a scale-x object, and place a labels array inside it. List your scale labels as string values, separated by commas. See our two example charts below.

Note: Do not confuse a `labels` array with a `label` (no "s") object. The latter is to specify your scale title.

Set your margins to automatically adjust by creating a plotarea object. Inside, add an adjust-layout attribute, and set the value to true.

https://demos.zingchart.com/view/P52LE52I
https://demos.zingchart.com/view/P52LE52I
{
  type: 'bar',
  plotarea: {
    'adjust-layout': true
  },
  'scale-x': {
    label: { /* Scale Title */
      text: "Here is a category scale",
    },
    labels: [ "Jan", "Feb", "March", "April", "May", "June", "July", "Aug" ] /* Scale Labels */
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]}
    ]
}
https://demos.zingchart.com/view/MGWEZ0F9
https://demos.zingchart.com/view/MGWEZ0F9
{
  type: "hbar",
  plotarea: {
    'adjust-layout': true
  },
  'scale-x': {
    label: { /* Scale Title */
      text: "Here is a category scale",
    },
    labels: [ "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6", "Year 7", "Year 8" ] /* Scale Labels */
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]}
    ]
}

Time-Series Scale

In addition to category scales, column charts (i.e., our default vertical bar) can also display a time-series scale on their x-axis. A time-series scale is used to represent time increments that can range from milliseconds to years. To create one, add a scale-xobject. Inside, insert a min-value attribute, step attribute, and transform object.

For the min-value and step, you’ll need to specify your minimum and step scale values in Unix time. Measured by the number of milliseconds that have elapsed since January 1, 1970, you can calculate your Unix timestamps with online conversion tools such as Epoch Converter.

Note: ZingChart accepts Unix time values in milliseconds, not seconds. To convert from seconds to milliseconds, multiply by 1000.

You can use the following shortcut terms for your step value: second, minute, hour, day, week, month, and year. (month and year are approximate values, due to the varying lengths of different months and the presence of leap years, which the shortcut does not take into account.) The terms can be combined with any multiplier. E.g., 6hour will create a step size of six hours and 2week will create a step size of two weeks.

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.

Note: To ensure your time-series scale reads in UTC time (ZingChart currently defaults to local time), add a `utc` attribute, and set the value to `true`.Note: Set your margins to automatically adjust by creating a `plotarea` object. Insert an `adjust-layout` attribute, and set the value to `true`.
https://demos.zingchart.com/view/ZT3DKKKH
https://demos.zingchart.com/view/ZT3DKKKH
{
  type: 'bar',
  utc: true, /* Set to UTC time */
  plotarea: {
    'adjust-layout': true
  },
  'scale-x': {
    label: { /* Scale Title */
      text: "Here is a time-series scale",
    },
    'min-value':1420070400000, /* In Unix time */
    step: "day", /* In Unix time or with ZingChart shortcuts */
    transform: { /* Transform object. */
      type: "date", /* To convert your Unix timestamps to dates */
      all: "%M %d" /* To format your time-series labels */
    }
  },
  series: [
    { values: [20,40,25,50,15,45,33,34]},
    { values: [5,30,21,18,59,50,28,33]}
    ]
}

Styling

You can incorporate all kinds of styles into your charts. In this section, we go over how to change your bar fills, borders, and corners. We also explain how to set how your bars appear when you hover over them. For further styling options, browse our JSON Attributes/Syntax page.

Bar Fill

There are two ways to style your bar fills: the first is by styling series objects individually, and the second is by styling nodes individually. Styling your bar fills by series is the more commonly known option. However, when working with a simple column or bar, i.e., charts with single data sets, you may find that it won’t provide you the appearance that you need. For single data sets, you need to specify your bar fill colors by nodes. We cover both methods below.

Go to the series object of the series you want to style. To change your bar fill color, add a background-color attribute. For a single color fill, add one hexadecimal or RGB value. For a gradient (two color) fill, add two values separated by a space. To adjust your bar fill’s transparency levels, add an alpha attribute. Provide a value between 0-1, with zero being clear and one being solid. For decimal values, make sure to place a zero before your decimal point.

Note: In addition to colors, you can incorporate patterns and images into your bar fills. See our [Patterns](https://www.zingchart.com/docs/tutorials/styling/patterns) and/or [Images](https://www.zingchart.com/docs/tutorials/styling/images) documents in our Features section for further instruction.
https://demos.zingchart.com/view/OBTIJXNY
https://demos.zingchart.com/view/OBTIJXNY
{
  type: 'bar',
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      'background-color': "#6666FF", /* Bar fill color (single) */
      alpha: 1, /* Transparency (solid) */
    },
    {
      values: [5,30,21,18,59,50,28,33],
      'background-color': "#6666FF #FF0066", /* Bar fill color (gradient) */
      alpha: 0.3 /* Transparency (more transparent) */
    }
  ]
}

When working with single data set column or bar, you’ll likely want to customize your bar fills. However, you’ll find that specifying your colors by series (as in the above method) will not achieve the appearance that you want. For single data set charts, what you want is to color your bar fills by node indexes.

To do this, add a plot object to your chart. Inside, add a styles array. In the array, provide your color values. Make sure your color values match up to the number of data elements you have in your data set. (Otherwise, your bars will appear according to ZingChart’s default color scheme.)

https://demos.zingchart.com/view/PQBP3N2B
https://demos.zingchart.com/view/PQBP3N2B
{
  type: 'bar',
  plot: {
    styles: [ "red", "orange", "yellow", "green", "blue", "purple", "brown", "black" ] /* Bar Fill by Node */
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    }
  ]
}

Bar Borders

You can set the width, color, and style of your bar borders. Go to the chart data object of the plot you want your changes to apply to. To set your border width, add a border-width attribute, and provide a pixel value. To set your border color, add a border-color attribute, and provide a hexadecimal or RGB value. To set your border’s line style, add a line-style attribute. You can choose one of the following values: solid, dashed, or dotted.

Note: You can also apply border styles globally, to affect all plots. To do so, create a `plot` object. Inside, insert your border attributes.
https://demos.zingchart.com/view/F8GP6PTX
https://demos.zingchart.com/view/F8GP6PTX
{
  type: 'bar',
  series: [
    {
      values: [20,40,25,50,15,45,33,34],
      'border-width':3, /* Border width */
      'border-color': "green", /* Border color */
      'line-style': "dashed"    /* Border style */
    },
    {
      values: [5,30,21,18,59,50,28,33],
      'border-width':3,
      'border-color': "purple",
      'line-style': "dotted"
    }
  ]
}

Rounded Corners

You can round the corners on your columns and bars. To do so, add a plot object to your chart. Inside, insert a border-radius attribute. Provide a pixel value to indicate the desired level of rounding.

https://demos.zingchart.com/view/7XHOTOSG
https://demos.zingchart.com/view/7XHOTOSG
{
  type: 'bar',
  plot: {
    'border-radius': "9px", /* Rounded Corners */
  },
  series: [
    {
      values: [20,40,25,50,15,45,33,34]
    },
    {
      values: [5,30,21,18,59,50,28,33]
    }
  ]
}

Hover States

You can specify how you want your bar fills and borders to appear when you hover over them. In your chart data object, add a hover-state object. You can place any combination of bar fill and border attributes (see above sections) inside the object. Hover over the bars on the below chart to see how styling attributes can be used.

Note: You can also apply hover states globally, to affect all plots. To do so, create a `plot` object. Inside, insert your `hover-state` object, and place your desired styling attributes inside it.
https://demos.zingchart.com/view/RPP4WO2D
https://demos.zingchart.com/view/RPP4WO2D
{
    type: 'bar',
    series: [
    {
      values: [20,40,25,50,15,45,33,34],
      'hover-state': { /* Hover object */
        'background-color': "yellow",
        'border-width':3,
        'border-color': "green",
        'line-style': "dashed"
      }
    },
    {
      values: [5,30,21,18,59,50,28,33],
      'hover-state': { /* Hover object */
        'background-color': "orange",
        'border-width':3,
        'border-color': "purple",
        'line-style': "dotted"
      }
    }
  ]
}

Summary

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