Show Nav

JavaScript 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  ...
  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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
"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.

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 "stacked" attribute 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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]}
    ]
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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-x" object. 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.

Note: 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

By Series

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 and/or Images documents in our Features section for further instruction.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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) */
    }
  ]
}
By Node

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.)

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
    "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.