CanvasXpress: Bar Chart simple

Bar Chart

A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value. Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.

Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

Show Code

Tools

HTML / JS
R Code

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "y" : {
            "data" : [
              [8.706982,11.685079,7.447139,5.8636785,7.9121375,9.292968,15.144213,25.258314,45.80173,81.23285,136.99355,216.94612,327.9146,465.51553,607.92194,829.9774,1065.4154,1321.308,1451.0314],
              [8.153986,11.789579,7.086151,5.772422,8.1190405,10.477056,14.8617325,24.708286,44.4679,80.45988,134.61995,221.84239,328.6906,460.50473,601.6026,810.1494,1063.4822,1264.2256,1452.435],
              [8.531222,11.558226,7.277043,5.4823275,8.416988,10.288261,15.261749,25.257257,44.189697,80.1818,135.97684,221.02246,333.33777,466.1553,611.8868,820.746,1076.8634,1297.461,1455.3517],
              [8.484676,10.860729,7.409591,5.65948,7.5373063,10.329692,14.673502,24.274427,43.972614,81.69764,136.1948,223.05602,334.93405,466.9516,619.11523,814.77,1069,1316.1648,1456.0057],
              [8.390458,11.2679,7.406479,5.9468513,7.7396493,10.448355,14.541901,24.606686,43.682808,80.532524,136.33427,222.57838,324.21,465.99402,628.9265,819.6771,1068.3192,1308.5236,1447.7366],
              [7.700506,11.118663,8.007438,5.8190928,8.001846,10.455659,14.597662,23.665176,44.528656,79.19549,135.74536,219.72852,327.37222,466.2414,637.97424,812.6911,1067.0955,1294.8905,1465.3195],
              [7.854906,11.080131,8.024586,6.0424485,7.736544,9.628827,14.586949,25.19364,42.942062,79.98921,134.87354,219.31291,332.53717,475.42496,633.04456,805.49164,1066.969,1337.0266,1483.6888],
              [6.9628153,11.046058,7.446263,6.0496793,7.8867893,9.681228,14.570295,25.320513,41.713345,77.35111,134.03543,224.59125,330.2524,477.72864,642.8185,817.50226,1045.5936,1315.9784,1489.651],
              [6.455602,10.932333,7.350552,6.2366705,8.008763,9.7652855,13.787195,24.622868,44.044502,77.572395,132.29305,220.7255,324.71024,470.44678,636.1199,803.3902,1018.02185,1290.5013,1443.1395],
              [6.846626,10.628864,7.754186,6.305303,7.502138,9.650113,14.136126,25.058332,43.42552,76.713165,133.51624,220.68234,328.08014,472.2442,632.797,803.37854,1008.7382,1279.7557,1447.3274],
              [7.247258,10.870571,7.441766,6.104868,7.738685,9.04571,14.72063,23.77565,43.04909,77.59282,135.38306,224.18513,327.78952,478.31262,634.5739,818.60767,1032.9458,1310.0829,1449.9086],
              [6.890875,10.393173,7.8036633,6.27325,7.69791,9.095802,14.441239,23.964825,42.92468,76.69008,134.4687,221.70732,320.5021,478.0229,651.369,815.18005,1014.5625,1278.1027,1492.7461],
              [6.2725306,9.707567,7.6868505,6.0985937,7.664872,9.31618,13.429637,23.78054,42.40348,76.119156,134.31883,224.07887,326.49954,477.32935,660.5712,813.2,1006.34827,1252.4244,1498.6761],
              [6.3538613,10.037822,7.755915,5.87159,7.558027,9.468466,13.939115,23.517944,43.221237,75.93548,136.09526,221.28906,336.7524,473.87436,669.3528,828.2429,1013.2746,1233.0597,1526.7732],
              [5.751666,9.164663,7.0378923,6.004556,7.6629295,9.192983,14.12276,24.733418,43.199272,78.35344,134.28496,225.97888,336.5,477.4593,666.08,824.1172,1010.07135,1214.5474,1469.7584],
              [5.859476,8.632442,7.062092,5.887318,7.555739,9.030226,13.797412,24.24187,42.50839,78.26122,135.05983,224.8439,343.06467,481.07312,673.97174,847.35016,1021.67267,1224.3108,1493.3024],
              [5.5934515,8.290604,6.88263,5.9526877,7.6931744,9.27532,13.328103,23.615591,42.669174,78.50226,136.43097,227.5007,342.5126,482.2721,677.3718,856.3391,1026.871,1225.7583,1493.6832],
              [5.5382876,8.196512,7.173601,6.090018,7.5736165,9.079056,12.903496,22.64064,42.099773,77.35972,136.37749,226.62212,346.0779,490.89215,678.71094,882.03595,1037.0938,1215.9259,1484.1432],
              [4.7869234,7.757022,7.0178795,5.5410013,7.4787035,9.162182,12.659625,22.638422,43.096123,78.000656,138.47307,230.09772,347.26224,502.96497,679.5328,896.17474,1048.3303,1201.1602,1478.8368],
              [4.6638055,7.34186,6.84208,5.3562727,7.2459054,8.836206,12.770316,21.817858,41.804756,79.36547,136.35393,225.8696,351.97415,500.40915,680.7449,885.68665,1049.2847,1218.7716,1486.5012],
              [4.5492373,7.264111,6.5671787,5.208736,7.3128357,9.333575,12.442564,21.054016,41.18341,77.212425,137.7765,229.215,354.71097,508.43488,680.93933,896.98193,1069.9061,1228.1772,1452.329],
              [4.2869153,7.1591325,6.579356,5.0589576,6.8088136,8.961997,13.036887,21.664688,38.74355,76.357635,137.62057,224.68343,355.08398,496.65005,676.8994,864.7251,1104.2781,1271.5781,1440.6938],
              [4.5606565,5.9779835,6.025963,4.9542685,6.7631407,8.797158,12.110703,20.274466,39.012524,75.38119,138.71611,222.68748,362.4456,499.87766,681.97076,897.3159,1121.3779,1273.3738,1425.7858],
              [4.353476,6.373304,6.014913,4.8041,6.7242894,8.400155,11.928918,19.963017,39.716503,71.98541,139.86786,222.36664,359.6714,508.42487,679.51917,888.49243,1133.3759,1271.551,1435.3374],
              [3.825682,5.9098096,5.9201546,4.6338754,6.189192,7.676528,11.4938965,19.246458,38.06933,72.14833,140.0439,227.10632,360.23886,523.413,675.75256,909.6282,1152.4669,1303.6042,1409.8857],
              [4.0926394,5.481881,5.279909,4.25264,5.932523,7.464927,11.132449,18.894629,35.502804,71.13199,136.67317,226.38042,349.0137,510.89478,667.4742,921.78046,1086.6934,1295.2065,1452.1143],
              [3.1450577,5.24758,5.4096875,4.4454403,5.7267904,7.2193594,10.881884,18.373995,35.156513,68.87952,134.5183,228.58217,351.92026,522.73444,682.2554,926.8627,1104.8331,1306.6786,1494.7257],
              [3.6901495,5.136345,4.9572163,4.4298606,5.820451,7.0011325,10.830583,18.057596,34.50853,68.882935,133.60591,230.06404,351.48322,526.84607,688.3157,929.5543,1106.9536,1324.6576,1508.735],
              [3.9687312,4.827531,4.5086703,3.805698,5.383467,6.9115095,10.287867,17.776545,32.88133,68.71301,133.27167,233.94278,348.88403,531.5165,694.2029,937.95917,1109.5822,1365.7515,1527.3986],
              [3.3858728,4.5735083,4.667493,4.125779,5.344763,6.8259387,10.017299,16.950651,32.997353,66.36868,129.10535,231.38008,348.76532,523.96106,703.88794,927.45337,1110.4595,1367.4783,1522.8949],
              [3.1804109,4.440828,4.681287,3.9497504,5.433235,7.184566,10.382013,17.117117,33.255238,66.34853,128.85991,229.31462,358.00345,523.38434,720.6654,934.4193,1133.3126,1368.4816,1572.8754],
              [2.536939,4.8970423,4.48003,3.7110124,5.131727,6.145637,9.761323,16.51993,32.49115,64.83188,126.476746,227.2995,358.8068,519.99615,723.93604,929.69507,1134.3127,1364.9094,1575.2651],
              [3.7067544,4.5739255,4.6252193,3.728362,5.290016,6.483848,9.386194,17.377314,32.35915,63.740856,125.22408,225.80759,358.90826,528.541,738.89264,932.9534,1163.4132,1361.0406,1594.0262],
              [3.585982,4.7138534,4.1178293,3.5904474,4.79952,6.0742764,9.537268,16.808195,32.671013,65.61406,123.360214,216.3144,359.1393,530.50073,737.702,965.7406,1183.9922,1397.7925,1645.5465],
              [3.1267142,3.9611623,3.595724,3.5122788,4.849614,6.0158486,9.366583,16.927296,32.447437,64.286766,120.91258,222.11243,365.93253,535.1329,733.5739,961.68616,1175.909,1431.9877,1603.3905],
              [3.0408108,3.8057191,3.60837,3.3682241,4.6358685,6.104762,9.394246,17.026001,31.889542,63.208824,122.059074,219.20863,361.37906,542.4959,731.00415,972.1437,1185.9352,1437.8379,1591.5035],
              [2.6026294,3.9513888,3.5972471,3.2781937,4.551072,6.2105107,9.663789,16.737268,31.43727,63.467167,119.40136,216.3957,352.81326,538.6791,736.22437,987.3304,1190.3358,1450.2631,1600.465],
              [2.6783347,3.784269,3.6068172,3.0391264,4.3881035,5.7040367,8.903548,16.001875,31.001175,58.617588,117.85425,216.77649,354.1588,541.7324,734.29065,982.5427,1203.0812,1455.0951,1617.9979],
              [2.306297,3.713346,3.2504992,3.0673,4.4196773,5.6766057,8.387805,15.487659,31.018808,59.811462,115.38344,213.11844,354.04736,540.37317,733.11316,981.3259,1206.1833,1487.9248,1638.3181],
              [2.712294,3.416841,3.4318032,3.1270282,4.255558,5.8442945,8.631734,15.544814,29.978085,58.405403,113.9043,208.67693,350.85773,538.1246,739.71875,995.95654,1233.0018,1508.1813,1662.2617],
              [2.2807906,3.4635017,3.1550288,3.0772839,4.244563,5.5405717,8.894453,16.168333,30.293564,58.052998,114.94805,212.3663,352.4229,545.4811,760.9827,1012.7448,1258.0085,1489.7928,1752.9291],
              [1.9197208,3.4582512,3.1803477,2.9766283,4.3068876,5.5902886,8.726711,15.844578,30.329466,56.979843,113.607666,205.31558,354.03433,541.42883,762.2497,1004.56146,1249.2275,1510.8302,1773.8607],
              [2.375,3.087912,3.0359683,3.0268216,4.3152847,5.623612,8.801011,15.840793,29.773218,56.361694,109.05966,202.85359,341.52972,534.4405,765.8334,999.9175,1244.7831,1515.0455,1787.2896],
              [2.246732,3.309264,3.1409714,2.7374332,4.1698036,5.425745,8.601405,15.23997,28.476131,55.257195,107.321754,198.59666,337.06622,533.92236,760.3752,1010.7564,1263.092,1525.0876,1807.6698],
              [1.524469,3.2666962,2.879323,2.7196083,4.1098065,5.5438848,8.708394,15.267864,28.273363,53.983257,105.11832,197.51654,328.23074,529.2303,757.1536,1010.1931,1250.1636,1544.602,1788.9939],
              [1.8190795,3.0997903,2.721124,2.6593354,3.825182,5.318167,8.381828,15.0083685,28.356459,53.420578,103.17556,192.10114,325.2862,516.01056,741.68756,1010.39496,1252.406,1533.0555,1823.7694],
              [2.3079984,2.732575,2.6901631,2.6605413,3.6705408,5.3930306,8.470519,15.144351,27.231373,52.367363,99.830765,188.19392,315.58475,509.74588,731.3984,1008.41895,1233.8741,1528.9523,1798.2773],
              [2.3968813,2.8528626,2.7712479,2.5368047,3.68158,5.3849406,8.564493,14.420782,26.855724,51.573692,97.99293,180.24138,309.99463,495.9078,717.48016,992.46796,1220.9701,1508.9287,1804.9751],
              [2.0654593,2.402944,2.444681,2.733632,3.6848624,5.539179,7.978223,14.376087,26.34161,50.52503,96.32862,175.38393,301.16306,483.57693,707.9481,986.5709,1212.0532,1500.3802,1749.4141],
              [1.7801499,2.7641408,2.5517948,2.5730896,3.7725487,5.431168,7.8477244,13.058435,25.567091,49.254444,95.12188,171.88838,300.08624,479.65594,707.2345,975.07385,1226.1962,1513.2445,1796.7073],
              [2.4174595,2.7325692,2.3796194,2.5574734,3.684491,5.1044083,7.0119004,12.466853,24.508224,48.81502,93.58263,166.22173,289.029,463.42368,690.6455,951.6067,1222.4553,1505.3281,1819.4225],
              [1.6361954,2.7387269,2.4425225,2.4663048,3.6117554,4.93872,7.33907,12.59598,24.573862,48.749706,92.440735,164.84421,280.6672,453.26413,673.1774,943.5203,1211.6854,1465.8732,1765.5598],
              [1.8345354,2.5809884,2.698379,2.5311725,3.5482657,4.9817867,6.630862,12.473509,23.500013,47.539913,90.57808,161.54938,276.75452,447.0173,663.798,933.58234,1207.0114,1458.2897,1723.9453],
              [1.8733112,2.4864147,2.6093187,2.6423368,3.3693924,4.636309,6.8186727,11.755816,22.977386,46.118492,89.84804,159.0629,267.91736,440.92502,647.8603,909.1765,1195.3691,1449.9603,1698.2404],
              [1.8149768,2.4946728,2.682911,2.3315032,3.526324,4.6635156,6.574338,11.464981,21.46082,44.261158,86.74376,155.56897,261.54218,427.57324,637.8066,892.37036,1172.1475,1424.7881,1653.3148],
              [1.8263164,2.3275776,2.4822414,2.4691072,3.4745016,4.6867886,6.663111,11.276467,20.84568,44.565933,86.51284,154.78247,255.61153,422.10873,622.1818,886.30383,1158.4346,1427.7235,1637.6769],
              [1.8401256,2.3146608,2.3287804,2.1718688,3.1654198,4.594709,6.711902,11.503819,20.759203,42.342113,84.10546,152.14394,252.73198,414.59372,615.0997,863.2654,1144.8949,1418.8275,1606.0967],
              [1.673483,2.1902792,2.3934844,2.3574164,3.1211765,4.618914,6.2707167,11.094046,20.187954,41.40798,82.41658,149.7485,249.75026,399.03455,610.69324,842.7984,1115.5668,1396.2412,1665.142],
              [1.6343431,2.3570561,2.2639403,2.0575984,3.1071568,4.5848737,7.029274,10.705049,20.814188,39.3607,82.071396,148.56802,241.72182,387.5147,607.2751,823.695,1116.4454,1413.6622,1712.6223],
              [1.705796,2.096412,2.3300056,2.0033274,2.9061215,4.6053615,6.9244194,11.370516,21.118046,39.031887,80.54383,148.58537,240.03247,380.36798,588.90137,803.4494,1094.1176,1372.3032,1708.3201],
              [1.4763131,2.0969913,2.1255012,2.28807,2.7075775,4.622697,6.8206563,11.121641,19.878565,37.46313,78.38177,147.45508,237.91121,375.7361,575.30194,791.3148,1075.4905,1357.6387,1756.571],
              [1.704205,2.1125925,2.134576,2.0168762,2.8815534,4.400636,6.2460732,10.866834,19.69044,37.74006,74.965576,144.74963,238.05296,375.38092,548.7174,779.41394,1056.379,1347.2483,1691.9576],
              [1.5995413,2.362375,2.1219225,2.2701983,2.8431246,4.2145324,6.4507275,11.270353,18.673847,37.24664,73.23299,143.12877,238.13396,362.6868,549.70166,777.38837,1038.8225,1338.3713,1651.4092],
              [1.6684241,1.9854474,2.1409605,2.161369,2.8672156,3.8248024,6.234827,11.199181,18.911594,37.298286,70.94079,138.27109,234.19507,354.65216,530.4939,776.18896,1014.97516,1330.1093,1623.1233],
              [1.4428811,1.9768153,2.084358,2.0040965,2.830165,4.160659,6.1870756,10.734728,19.36859,36.565357,68.60977,136.00577,234.34222,352.96616,517.2494,762.3866,1006.6305,1316.4983,1626.1501],
              [1.4350054,2.1950965,2.080736,2.0629365,2.7230184,3.841807,5.915137,11.123057,19.16119,34.98014,66.005775,132.3365,232.57625,348.44748,513.8463,742.1429,978.4309,1283.286,1645.7605],
              [1.7798218,2.3877602,2.1399078,2.069851,2.7933679,3.6206691,6.045658,11.106792,19.953064,34.04308,66.5604,126.00526,226.51227,347.48456,510.05878,705.05914,964.75757,1263.9072,1607.117],
              [1.4991242,2.0800712,2.010892,2.0814564,2.6350927,3.5542636,5.6049113,10.514131,19.871521,33.888054,64.240814,121.30771,218.75763,340.336,489.93204,700.4133,954.92487,1249.3452,1576.7758],
              [1.3197795,2.0898275,1.9093047,2.137273,2.9204664,3.3134344,5.511993,10.687724,19.824928,32.31524,63.75483,115.03055,214.0672,334.86203,473.0439,675.6899,950.41614,1227.6809,1555.7057],
              [1.3987917,1.8312771,1.8286903,1.9103947,2.7716868,3.561247,5.6816525,9.813499,19.359257,32.63765,62.308605,110.43558,204.5666,329.89786,464.3462,655.5698,928.41504,1197.0809,1555.62],
              [1.3531064,1.9635952,1.9056976,1.9488384,2.584392,3.4009101,5.3701797,9.94687,18.43097,33.24037,60.596996,109.04953,198.73021,326.2786,459.9185,651.47955,901.659,1163.375,1531.7428],
              [1.2866822,1.7872859,1.7446395,2.135241,2.7736275,3.3039436,5.3278265,10.045067,18.731632,34.588028,58.873623,107.32103,192.63406,322.14087,458.25717,647.3491,870]
            ],
            "smps" : ["Under 1s","1-4 years","5-9 years","10-14 years","15-19 years","20-24 years","25-29 years","30-34 years","35-39 years","40-44 years","45-49 years","50-54 years","55-59 years","60-64 years","65-69 years","70-74 years","75-79 years","80-84 years","Over 85s"],
            "vars" : ["1950","1951","1952","1953","1954","1955","1956","1957","1958","1959","1960","1961","1962","1963","1964","1965","1966","1967","1968","1969","1970","1971","1972","1973","1974","1975","1976","1977","1978","1979","1980","1981","1982","1983","1984","1985","1986","1987","1988","1989","1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021"]
         },
         "z" : {
            "Year" : ["1950","1951","1952","1953","1954","1955","1956","1957","1958","1959","1960","1961","1962","1963","1964","1965","1966","1967","1968","1969","1970","1971","1972","1973","1974","1975","1976","1977","1978","1979","1980","1981","1982","1983","1984","1985","1986","1987","1988","1989","1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "citation" : "Data source :  WHO Mortality Database (2024)",
         "citationScaleFontFactor" : 0.7,
         "graphOrientation" : "horizontal",
         "graphType" : "Bar",
         "maxSmpStringLen" : 50,
         "motionBy" : "Year",
         "showDataValues" : true,
         "showLegend" : false,
         "subtitle" : "The reported annual death rate from malignant cancers, based on the underlying cause listed on death certificates.\\nThis is shown as a rate per 100,000 people in each age group.",
         "subtitleScaleFontFactor" : 0.6,
         "theme" : "CanvasXpress",
         "title" : "Cancer death rate by age group, United States",
         "widthFactor" : 2,
         "xAxisGridMajorShow" : false,
         "xAxisShow" : false
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-cancerDeathRateByAge-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/r/cX-cancerDeathRateByAge-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  citation="Data source :  WHO Mortality Database (2024)",
  citationScaleFontFactor=0.7,
  graphOrientation="horizontal",
  graphType="Bar",
  maxSmpStringLen=50,
  motionBy="Year",
  showDataValues=TRUE,
  showLegend=FALSE,
  subtitle="The reported annual death rate from malignant cancers, based on the underlying cause listed on death certificates.\nThis is shown as a rate per 100,000 people in each age group.",
  subtitleScaleFontFactor=0.6,
  theme="CanvasXpress",
  title="Cancer death rate by age group, United States",
  widthFactor=2,
  xAxisGridMajorShow=FALSE,
  xAxisShow=FALSE
)

Bar Chart

Documentation

Company

Information