Options Admin - Responsive Web Application Kit

Charts - Column & Bar

One stop solution for perfect admin dashboard!

Toggle Code!

amCharts!Programming libraries and tools for all your data visualization needs. For official documentation, click here .

Simple Column Chart

<!-- ========== HTML ========== --><div id="chart2" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart2        var chart2 = AmCharts.makeChart( "chart2", {          "type": "serial",          "theme": "light",          "fontFamily": "Poppins",          "dataProvider": [ {            "country": "USA",            "visits": 2025          }, {            "country": "China",            "visits": 1882          }, {            "country": "Japan",            "visits": 1809          }, {            "country": "Germany",            "visits": 1322          }, {            "country": "UK",            "visits": 1122          }, {            "country": "France",            "visits": 1114          }, {            "country": "India",            "visits": 984          } ],          "valueAxes": [ {            "gridColor": "#FFFFFF",            "gridAlpha": 0.2,            "dashLength": 0          } ],          "gridAboveGraphs": true,          "startDuration": 1,          "graphs": [ {            "balloonText": "[[category]]: [[value]]",            "fillAlphas": 0.8,            "lineAlpha": 0.2,            "type": "column",            "valueField": "visits"          } ],          "chartCursor": {            "categoryBalloonEnabled": false,            "cursorAlpha": 0,            "zoomable": false          },          "categoryField": "country",          "categoryAxis": {            "gridPosition": "start",            "gridAlpha": 0,            "tickPosition": "start",            "tickLength": 20          },          "export": {            "enabled": true          }        } );    });</script>

Column & Bar - Column with rotated series

<!-- ========== HTML ========== --><div id="chart1" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart1        var chart = AmCharts.makeChart("chart1", {          "type": "serial",          "theme": "light",          "fontFamily": "Poppins",          "marginRight": 70,          "dataProvider": [{            "country": "USA",            "visits": 3025,            "color": "#FF0F00"          }, {            "country": "China",            "visits": 1882,            "color": "#FF6600"          }, {            "country": "Japan",            "visits": 1809,            "color": "#FF9E01"          }, {            "country": "Germany",            "visits": 1322,            "color": "#FCD202"          }, {            "country": "UK",            "visits": 1122,            "color": "#F8FF01"          }, {            "country": "France",            "visits": 1114,            "color": "#B0DE09"          }, {            "country": "India",            "visits": 984,            "color": "#04D215"          }, {            "country": "Spain",            "visits": 711,            "color": "#0D8ECF"          }, {            "country": "Netherlands",            "visits": 665,            "color": "#0D52D1"          }, {            "country": "Russia",            "visits": 580,            "color": "#2A0CD0"          }, {            "country": "South Korea",            "visits": 443,            "color": "#8A0CCF"          }, {            "country": "Canada",            "visits": 441,            "color": "#CD0D74"          }],          "valueAxes": [{            "axisAlpha": 0,            "position": "left",            "title": "Visitors from country"          }],          "startDuration": 1,          "graphs": [{            "balloonText": "[[category]]: [[value]]",            "fillColorsField": "color",            "fillAlphas": 0.9,            "lineAlpha": 0.2,            "type": "column",            "valueField": "visits"          }],          "chartCursor": {            "categoryBalloonEnabled": false,            "cursorAlpha": 0,            "zoomable": false          },          "categoryField": "country",          "categoryAxis": {            "gridPosition": "start",            "labelRotation": 45          },          "export": {            "enabled": true          }        });    });</script>

Stacked Column Chart

<!-- ========== HTML ========== --><div id="chart3" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart3        var chart3 = AmCharts.makeChart("chart3", {            "type": "serial",            "theme": "light",            "fontFamily": "Poppins",            "legend": {                "horizontalGap": 10,                "maxColumns": 1,                "position": "right",                "useGraphSettings": true,                "markerSize": 10            },            "dataProvider": [{                "year": 2003,                "europe": 2.5,                "namerica": 2.5,                "asia": 2.1,                "lamerica": 1.5,                "meast": 1.2,                "africa": 0.8            }, {                "year": 2004,                "europe": 2.6,                "namerica": 2.7,                "asia": 2.2,                "lamerica": 1.7,                "meast": 1.25,                "africa": 0.6            }, {                "year": 2005,                "europe": 2.8,                "namerica": 2.9,                "asia": 2.4,                "lamerica": 1.6,                "meast": 1.2,                "africa": 0.5            }],            "valueAxes": [{                "stackType": "regular",                "axisAlpha": 0.3,                "gridAlpha": 0            }],            "graphs": [{                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "Europe",                "type": "column",                "color": "#000000",                "valueField": "europe"            }, {                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "North America",                "type": "column",                "color": "#000000",                "valueField": "namerica"            }, {                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "Asia-Pacific",                "type": "column",                "color": "#000000",                "valueField": "asia"            }, {                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "Latin America",                "type": "column",                "color": "#000000",                "valueField": "lamerica"            }, {                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "Middle-East",                "type": "column",                "color": "#000000",                "valueField": "meast"            }, {                "balloonText": "[[title]][[category]]: [[value]]",                "fillAlphas": 0.8,                "labelText": "[[value]]",                "lineAlpha": 0.3,                "title": "Africa",                "type": "column",                "color": "#000000",                "valueField": "africa"            }],            "categoryField": "year",            "categoryAxis": {                "gridPosition": "start",                "axisAlpha": 0,                "gridAlpha": 0,                "position": "left"            },            "export": {                "enabled": true             }        });    });</script>

Column and Line mix

<!-- ========== HTML ========== --><div id="chart4" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart4        var chart4 = AmCharts.makeChart( "chart4", {          "type": "serial",          "addClassNames": true,          "theme": "light",          "autoMargins": false,          "marginLeft": 30,          "marginRight": 8,          "marginTop": 10,          "marginBottom": 26,          "fontFamily": "Poppins",          "balloon": {            "adjustBorderColor": false,            "horizontalPadding": 10,            "verticalPadding": 8,            "color": "#ffffff"          },          "dataProvider": [ {            "year": 2009,            "income": 23.5,            "expenses": 21.1          }, {            "year": 2010,            "income": 26.2,            "expenses": 30.5          }, {            "year": 2011,            "income": 30.1,            "expenses": 34.9          }, {            "year": 2012,            "income": 29.5,            "expenses": 31.1          }, {            "year": 2013,            "income": 30.6,            "expenses": 28.2,            "dashLengthLine": 5          }, {            "year": 2014,            "income": 34.1,            "expenses": 32.9,            "dashLengthColumn": 5,            "alpha": 0.2,            "additional": "(projection)"          } ],          "valueAxes": [ {            "axisAlpha": 0,            "position": "left"          } ],          "startDuration": 1,          "graphs": [ {            "alphaField": "alpha",            "balloonText": "[[title]] in [[category]]:[[value]][[additional]]",            "fillAlphas": 1,            "title": "Income",            "type": "column",            "valueField": "income",            "dashLengthField": "dashLengthColumn"          }, {            "id": "graph2",            "balloonText": "[[title]] in [[category]]:[[value]][[additional]]",            "bullet": "round",            "lineThickness": 3,            "bulletSize": 7,            "bulletBorderAlpha": 1,            "bulletColor": "#FFFFFF",            "useLineColorForBulletBorder": true,            "bulletBorderThickness": 3,            "fillAlphas": 0,            "lineAlpha": 1,            "title": "Expenses",            "valueField": "expenses",            "dashLengthField": "dashLengthLine"          } ],          "categoryField": "year",          "categoryAxis": {            "gridPosition": "start",            "axisAlpha": 0,            "tickLength": 0          },          "export": {            "enabled": true          }        } );    });</script>

3D Bar Chart

<!-- ========== HTML ========== --><div id="chart5" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart5        var chart5 = AmCharts.makeChart("chart5", {            "theme": "light",            "type": "serial",            "fontFamily": "Poppins",            "startDuration": 2,            "dataProvider": [{                "country": "USA",                "visits": 4025,                "color": "#FF0F00"            }, {                "country": "China",                "visits": 1882,                "color": "#FF6600"            }, {                "country": "Japan",                "visits": 1809,                "color": "#FF9E01"            }, {                "country": "Germany",                "visits": 1322,                "color": "#FCD202"            }, {                "country": "UK",                "visits": 1122,                "color": "#F8FF01"            }, {                "country": "France",                "visits": 1114,                "color": "#B0DE09"            }, {                "country": "India",                "visits": 984,                "color": "#04D215"            }, {                "country": "Spain",                "visits": 711,                "color": "#0D8ECF"            }, {                "country": "Netherlands",                "visits": 665,                "color": "#0D52D1"            }, {                "country": "Russia",                "visits": 580,                "color": "#2A0CD0"            }, {                "country": "South Korea",                "visits": 443,                "color": "#8A0CCF"            }, {                "country": "Canada",                "visits": 441,                "color": "#CD0D74"            }, {                "country": "Brazil",                "visits": 395,                "color": "#754DEB"            }, {                "country": "Italy",                "visits": 386,                "color": "#DDDDDD"            }, {                "country": "Australia",                "visits": 384,                "color": "#999999"            }, {                "country": "Taiwan",                "visits": 338,                "color": "#333333"            }, {                "country": "Poland",                "visits": 328,                "color": "#000000"            }],            "valueAxes": [{                "position": "left",                "title": "Visitors"            }],            "graphs": [{                "balloonText": "[[category]]: [[value]]",                "fillColorsField": "color",                "fillAlphas": 1,                "lineAlpha": 0.1,                "type": "column",                "valueField": "visits"            }],            "depth3D": 20,            "angle": 30,            "chartCursor": {                "categoryBalloonEnabled": false,                "cursorAlpha": 0,                "zoomable": false            },            "categoryField": "country",            "categoryAxis": {                "gridPosition": "start",                "labelRotation": 90            },            "export": {                "enabled": true             }        });    });</script>

3D Stacked Column Chart

<!-- ========== HTML ========== --><div id="chart6" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart6        var chart6 = AmCharts.makeChart("chart6", {            "theme": "light",            "type": "serial",            "fontFamily": "Poppins",            "dataProvider": [{                "country": "USA",                "year2004": 3.5,                "year2005": 4.2            }, {                "country": "UK",                "year2004": 1.7,                "year2005": 3.1            }, {                "country": "Canada",                "year2004": 2.8,                "year2005": 2.9            }, {                "country": "Japan",                "year2004": 2.6,                "year2005": 2.3            }, {                "country": "France",                "year2004": 1.4,                "year2005": 2.1            }, {                "country": "Brazil",                "year2004": 2.6,                "year2005": 4.9            }, {                "country": "Russia",                "year2004": 6.4,                "year2005": 7.2            }, {                "country": "India",                "year2004": 8,                "year2005": 7.1            }, {                "country": "China",                "year2004": 9.9,                "year2005": 10.1            }],            "valueAxes": [{                "stackType": "3d",                "unit": "%",                "position": "left",                "title": "GDP growth rate",            }],            "startDuration": 1,            "graphs": [{                "balloonText": "GDP grow in [[category]] (2004): [[value]]",                "fillAlphas": 0.9,                "lineAlpha": 0.2,                "title": "2004",                "type": "column",                "valueField": "year2004"            }, {                "balloonText": "GDP grow in [[category]] (2005): [[value]]",                "fillAlphas": 0.9,                "lineAlpha": 0.2,                "title": "2005",                "type": "column",                "valueField": "year2005"            }],            "plotAreaFillAlphas": 0.1,            "depth3D": 60,            "angle": 30,            "categoryField": "country",            "categoryAxis": {                "gridPosition": "start"            },            "export": {                "enabled": true             }        });    });</script>

Layered Column Chart

<!-- ========== HTML ========== --><div id="chart7" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart7        var chart7 = AmCharts.makeChart("chart7", {            "theme": "light",            "type": "serial",            "fontFamily": "Poppins",            "dataProvider": [{                "country": "USA",                "year2004": 3.5,                "year2005": 4.2            }, {                "country": "UK",                "year2004": 1.7,                "year2005": 3.1            }, {                "country": "Canada",                "year2004": 2.8,                "year2005": 2.9            }, {                "country": "Japan",                "year2004": 2.6,                "year2005": 2.3            }, {                "country": "France",                "year2004": 1.4,                "year2005": 2.1            }, {                "country": "Brazil",                "year2004": 2.6,                "year2005": 4.9            }],            "valueAxes": [{                "unit": "%",                "position": "left",                "title": "GDP growth rate",            }],            "startDuration": 1,            "graphs": [{                "balloonText": "GDP grow in [[category]] (2004): [[value]]",                "fillAlphas": 0.9,                "lineAlpha": 0.2,                "title": "2004",                "type": "column",                "valueField": "year2004"            }, {                "balloonText": "GDP grow in [[category]] (2005): [[value]]",                "fillAlphas": 0.9,                "lineAlpha": 0.2,                "title": "2005",                "type": "column",                "clustered":false,                "columnWidth":0.5,                "valueField": "year2005"            }],            "plotAreaFillAlphas": 0.1,            "categoryField": "country",            "categoryAxis": {                "gridPosition": "start"            },            "export": {                "enabled": true             }        });    });</script>

Stacked bar chart with negative values

<!-- ========== HTML ========== --><div id="chart8" class="op-chart"></div><!-- ========== JS ========== --><script>    $(function($) {        // chart8        var chart8 = AmCharts.makeChart("chart8", {              "type": "serial",              "theme": "light",              "fontFamily": "Poppins",              "rotate": true,              "marginBottom": 50,              "dataProvider": [{                "age": "85+",                "male": -0.1,                "female": 0.3              }, {                "age": "80-54",                "male": -0.2,                "female": 0.3              }, {                "age": "75-79",                "male": -0.3,                "female": 0.6              }, {                "age": "70-74",                "male": -0.5,                "female": 0.8              }, {                "age": "65-69",                "male": -0.8,                "female": 1.0              }, {                "age": "60-64",                "male": -1.1,                "female": 1.3              }, {                "age": "55-59",                "male": -1.7,                "female": 1.9              }, {                "age": "50-54",                "male": -2.2,                "female": 2.5              }, {                "age": "45-49",                "male": -2.8,                "female": 3.0              }, {                "age": "40-44",                "male": -3.4,                "female": 3.6              }, {                "age": "35-39",                "male": -4.2,                "female": 4.1              }, {                "age": "30-34",                "male": -5.2,                "female": 4.8              }, {                "age": "25-29",                "male": -5.6,                "female": 5.1              }, {                "age": "20-24",                "male": -5.1,                "female": 5.1              }, {                "age": "15-19",                "male": -3.8,                "female": 3.8              }, {                "age": "10-14",                "male": -3.2,                "female": 3.4              }, {                "age": "5-9",                "male": -4.4,                "female": 4.1              }, {                "age": "0-4",                "male": -5.0,                "female": 4.8              }],              "startDuration": 1,              "graphs": [{                "fillAlphas": 0.8,                "lineAlpha": 0.2,                "type": "column",                "valueField": "male",                "title": "Male",                "labelText": "[[value]]",                "clustered": false,                "labelFunction": function(item) {                  return Math.abs(item.values.value);                },                "balloonFunction": function(item) {                  return item.category + ": " + Math.abs(item.values.value) + "%";                }              }, {                "fillAlphas": 0.8,                "lineAlpha": 0.2,                "type": "column",                "valueField": "female",                "title": "Female",                "labelText": "[[value]]",                "clustered": false,                "labelFunction": function(item) {                  return Math.abs(item.values.value);                },                "balloonFunction": function(item) {                  return item.category + ": " + Math.abs(item.values.value) + "%";                }              }],              "categoryField": "age",              "categoryAxis": {                "gridPosition": "start",                "gridAlpha": 0.2,                "axisAlpha": 0              },              "valueAxes": [{                "gridAlpha": 0,                "ignoreAxisWidth": true,                "labelFunction": function(value) {                  return Math.abs(value) + '%';                },                "guides": [{                  "value": 0,                  "lineAlpha": 0.2                }]              }],              "balloon": {                "fixedPosition": true              },              "chartCursor": {                "valueBalloonsEnabled": false,                "cursorAlpha": 0.05,                "fullWidth": true              },              "allLabels": [{                "text": "Male",                "x": "28%",                "y": "97%",                "bold": true,                "align": "middle"              }, {                "text": "Female",                "x": "75%",                "y": "97%",                "bold": true,                "align": "middle"              }],             "export": {                "enabled": true              }            });    });</script>

John Doe

Charts - Column & Bar

Simple Column Chart

Column & Bar - Column with rotated series

Stacked Column Chart

Column and Line mix

3D Bar Chart

3D Stacked Column Chart

Layered Column Chart

Stacked bar chart with negative values

Useful Sidebar