Chart Attributes
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
- m
- n
- o
- p
- q
- r
- s
- t
- u
- v
- w
- x
- y
- z
- Area 2D
- Bar 2D
- Bar 3D
- Box and Whisker 2D
- Bubble Chart
- Candlestick Chart
- Chord
- Column 2D
- Column 3D
- Doughnut 2D
- Doughnut 3D
- Drag Node Chart
- Drag-able Area 2D Chart
- Drag-able Column 2D Chart
- Drag-able Line 2D Chart
- Error Bar Chart
- Error Line 2D Chart
- Error Scatter Chart
- Funnel Chart
- Gantt Chart
- Heat Map Chart
- Horizontal Bullet Graph
- Horizontal LED
- Inverse Y-axis Area Chart
- Inverse Y-axis Column 2D Chart
- Inverse Y-axis Line 2D Chart
- Kagi Chart
- Line 2D
- Logarithmic Column 2D Chart
- Logarithmic Line 2D Chart
- Marimekko
- Multi-axis Line Chart
- Multi-level Pie Chart
- Multi-series 2D Dual Y Combination Chart (Column + Line + Area + Spline)
- Multi-series 2D Single Y Combination Chart (Column + Line + Area + Spline)
- Multi-series 3D Dual Y Combination Chart (Column + Line + Area + Spline)
- Multi-series 3D Single Y Combination Chart (Column + Line + Area + Spline)
- Multi-series Area 2D
- Multi-series Bar 2D
- Multi-series Bar 3D
- Multi-series Column 2D
- Multi-series Column 3D
- Multi-series Column 3D + Line Dual Y Axis
- Multi-series Column 3D + Line Single Y-axis
- Multi-series Line 2D
- Multi-series Spline
- Multi-series Spline Area
- Multi-series Stacked Column 2D
- Multi-series Stacked Column 2D + Line Dual Y Axis
- Overlapped Column 2D
- Overlapped Bar 2D
- Pareto 2D
- Pareto 3D
- Pie 2D
- Pie 3D
- Pyramid Chart
- Radar Chart
- Real-time Angular
- Real-time Area
- Real-time Bulb
- Real-time Column
- Real-time Cylinder
- Real-time Horizontal Linear
- Real-time Line
- Real-time Line (Dual Y)
- Real-time Stacked Area
- Real-time Stacked Column
- Real-time Thermometer
- Sankey Diagram
- Scatter Chart
- Scroll Area 2D
- Scroll Bar 2D
- Scroll Column 2D
- Scroll Combination 2D (Dual Y)
- Scroll Combination 2D (Single Y)
- Scroll Line 2D
- Scroll Multi-series Stacked Column 2D
- Scroll Multi-series Stacked Column 2D + Line (Dual Y)
- Scroll Stacked Bar 2D
- Scroll Stacked Column 2D
- Select-scatter Chart
- Single-series Spline 2D
- Single-series Spline Area 2D
- Spark Column
- Spark Line
- Spark Win/Loss
- Stacked 2D Column + Line Single Y-axis
- Stacked 3D Column + Line Single Y-axis
- Stacked Area 2D
- Stacked Area 2D Line Dual Y-axis Chart
- Stacked Bar 2D
- Stacked Bar 3D
- Stacked Column 2D
- Stacked Column 2D Line Dual Y-axis Chart
- Stacked Column 3D
- Stacked Column 3D + Line Dual Y Axis
- Step Line Charts
- Sunburst
- Tree Map Chart
- Vertical Bullet Graph
- Vertical LED
- Waterfall / Cascade Chart
- Zoom Line
- Zoom Line Dual Y-axis
- Zoom Scatter
- json
- xml
{
"chart": {
"animation": "0",
"hideTitle": "1",
"plotToolText": "<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>",
"horizontalPadding": "1",
"verticalPadding": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"legenditemfontcolor": "3d5c5c",
"algorithm": "squarified",
"caption": "Harry's SuperMart: Sales Team Performance Analysis",
"legendScaleLineThickness": "0",
"legendCaptionFontSize": "10",
"subcaption": "Year Till Date",
"legendCaption": "Growth in sales - Compared to previous year",
"theme": "fusion"
},
"data": [
{
"label": "USA",
"fillcolor": "8c8c8c",
"value": "8635000",
"data": [
{
"label": "Northern Region",
"value": "4140000",
"data": [
{
"label": "Carol Francis",
"value": "84000",
"sValue": "15"
},
{
"label": "Otis Newman",
"value": "60000",
"sValue": "10"
},
{
"label": "Darlene Alvarez",
"value": "50000",
"sValue": "11"
},
{
"label": "Lucas Cannon",
"value": "58000",
"sValue": "5"
},
{
"label": "Rosalie Huff",
"value": "36000",
"sValue": "-5"
},
{
"label": "Jerome Vargas",
"value": "72000",
"sValue": "14"
},
{
"label": "Becky Barton",
"value": "18000",
"sValue": "-10"
},
{
"label": "Ben Rios",
"value": "14000",
"sValue": "-5"
},
{
"label": "Donnie Patton",
"value": "37000",
"sValue": "2"
},
{
"label": "Dana Freeman",
"value": "41000",
"sValue": "5"
},
{
"label": "Darren Barrett",
"value": "54000",
"sValue": "7"
},
{
"label": "Steve Vaughn",
"value": "35000",
"sValue": "12"
},
{
"label": "Roosevelt Rhodes",
"value": "48000",
"sValue": "15"
},
{
"label": "Moses Sparks",
"value": "38000",
"sValue": "-4"
},
{
"label": "Hope Cox",
"value": "32000",
"sValue": "-10"
},
{
"label": "Hector Lowe",
"value": "66000",
"sValue": "15"
},
{
"label": "Lori Christensen",
"value": "47000",
"sValue": "10"
},
{
"label": "Roman Aguilar",
"value": "14000",
"sValue": "-15"
},
{
"label": "Brittany Chandler",
"value": "21000",
"sValue": "-12"
},
{
"label": "Tiffaney Battle",
"value": "60000",
"sValue": "10"
},
{
"label": "Elin Stamps",
"value": "54000",
"sValue": "5"
},
{
"label": "Donnetta Coley",
"value": "59000",
"sValue": "+14"
},
{
"label": "Emmaline Halcomb",
"value": "34000",
"sValue": "-5"
},
{
"label": "Natosha Hammett",
"value": "39000",
"sValue": "-7"
},
{
"label": "Kimi Stegall",
"value": "15000",
"sValue": "-19"
},
{
"label": "Norberto Kirk",
"value": "46000",
"sValue": "2"
},
{
"label": "Noma Martindale",
"value": "52000",
"sValue": "12"
},
{
"label": "Coreen Numbers",
"value": "30000",
"sValue": "-1"
},
{
"label": "Chas Irvin",
"value": "26000",
"sValue": "-17"
},
{
"label": "Carlo Tobin",
"value": "31000",
"sValue": "-14"
},
{
"label": "Ayanna Mclain",
"value": "29000",
"sValue": "-5"
},
{
"label": "Rolland Turney",
"value": "42000",
"sValue": "+5"
},
{
"label": "Ona Roden",
"value": "64000",
"sValue": "+20"
},
{
"label": "Drew Clarkson",
"value": "24000",
"sValue": "-20"
},
{
"label": "Samuel Adler",
"value": "29000",
"sValue": "-15"
},
{
"label": "Adrian Steen",
"value": "51000",
"sValue": "2"
},
{
"label": "Xiao Batson",
"value": "35000",
"sValue": "-2"
},
{
"label": "Britney Hammonds",
"value": "45000",
"sValue": "3"
},
{
"label": "Roslyn Wilhelm",
"value": "28000",
"sValue": "-5"
},
{
"label": "Alva Puente",
"value": "26000",
"sValue": "-8"
},
{
"label": "Daina Horvath",
"value": "49000",
"sValue": "9"
},
{
"label": "Louie Chaney",
"value": "54000",
"sValue": "15"
},
{
"label": "Olympia Mcmullen",
"value": "71000",
"sValue": "14"
},
{
"label": "Nichol Leclair",
"value": "38000",
"sValue": "-10"
},
{
"label": "Marylou Messenger",
"value": "41000",
"sValue": "5"
},
{
"label": "Christoper Crowley",
"value": "34000",
"sValue": "-4"
},
{
"label": "Neville Venable",
"value": "37000",
"sValue": "-10"
},
{
"label": "Brock Rowell",
"value": "35000",
"sValue": "-4"
},
{
"label": "Gisele Pelletier",
"value": "32000",
"sValue": "-5"
},
{
"label": "Thelma Caldwell",
"value": "35000",
"sValue": "5"
},
{
"label": "Shyla Plunkett",
"value": "84000",
"sValue": "15"
},
{
"label": "Joie Dickson",
"value": "60000",
"sValue": "10"
},
{
"label": "Shana Nabors",
"value": "50000",
"sValue": "11"
},
{
"label": "Catina Burris",
"value": "58000",
"sValue": "5"
},
{
"label": "Man Spearman",
"value": "36000",
"sValue": "-5"
},
{
"label": "Shaunna Hamby",
"value": "72000",
"sValue": "14"
},
{
"label": "Stormy Read",
"value": "18000",
"sValue": "-10"
},
{
"label": "Wen Coe",
"value": "14000",
"sValue": "-5"
},
{
"label": "Elizebeth Poston",
"value": "37000",
"sValue": "2"
},
{
"label": "Breanna Stringer",
"value": "41000",
"sValue": "5"
},
{
"label": "Allyn Holly",
"value": "54000",
"sValue": "7"
},
{
"label": "Lera Gaylord",
"value": "35000",
"sValue": "12"
},
{
"label": "Lashunda Dowd",
"value": "48000",
"sValue": "15"
},
{
"label": "Kiesha Tyner",
"value": "38000",
"sValue": "-4"
},
{
"label": "Lamont Allman",
"value": "32000",
"sValue": "-10"
},
{
"label": "Sun Switzer",
"value": "66000",
"sValue": "15"
},
{
"label": "Dorene Small",
"value": "47000",
"sValue": "10"
},
{
"label": "Cherlyn Bozeman",
"value": "14000",
"sValue": "-15"
},
{
"label": "Stephani Contreras",
"value": "21000",
"sValue": "-12"
},
{
"label": "Bebe Holcomb",
"value": "60000",
"sValue": "10"
},
{
"label": "Shenika Barham",
"value": "54000",
"sValue": "5"
},
{
"label": "Troy Hobbs",
"value": "59000",
"sValue": "+14"
},
{
"label": "Thomas Tom",
"value": "34000",
"sValue": "-5"
},
{
"label": "Sunshine Libby",
"value": "39000",
"sValue": "-7"
},
{
"label": "Tambra Patten",
"value": "15000",
"sValue": "-19"
},
{
"label": "Marlyn Cato",
"value": "46000",
"sValue": "2"
},
{
"label": "Jeanelle Ham",
"value": "52000",
"sValue": "12"
},
{
"label": "Armanda Kimble",
"value": "30000",
"sValue": "-1"
},
{
"label": "Danna Fitzpatrick",
"value": "26000",
"sValue": "-17"
},
{
"label": "Elmira Nagle",
"value": "31000",
"sValue": "-14"
},
{
"label": "Bella Marx",
"value": "29000",
"sValue": "-5"
},
{
"label": "Vania Meeks",
"value": "42000",
"sValue": "+5"
},
{
"label": "Florencio Heffner",
"value": "64000",
"sValue": "+20"
},
{
"label": "Amie Peoples",
"value": "24000",
"sValue": "-20"
},
{
"label": "Chrystal Downs",
"value": "29000",
"sValue": "-15"
},
{
"label": "Glennis Chisholm",
"value": "51000",
"sValue": "2"
},
{
"label": "Sydney Castaneda",
"value": "35000",
"sValue": "-2"
},
{
"label": "Gregory Drummond",
"value": "45000",
"sValue": "3"
},
{
"label": "Birdie Neely",
"value": "28000",
"sValue": "-5"
},
{
"label": "Ciera Mcafee",
"value": "26000",
"sValue": "-8"
},
{
"label": "Martin Larose",
"value": "49000",
"sValue": "9"
},
{
"label": "Bobette Dutton",
"value": "54000",
"sValue": "15"
},
{
"label": "Numbers Yarbrough",
"value": "71000",
"sValue": "14"
},
{
"label": "Sanjuanita Croteau",
"value": "38000",
"sValue": "-10"
},
{
"label": "Alysha Aguirre",
"value": "41000",
"sValue": "5"
},
{
"label": "Beau Welker",
"value": "34000",
"sValue": "-4"
},
{
"label": "Yuri Brannon",
"value": "37000",
"sValue": "-10"
},
{
"label": "Breana Marion",
"value": "35000",
"sValue": "-4"
},
{
"label": "Bernardina Fennell",
"value": "32000",
"sValue": "-5"
},
{
"label": "Bridgette Gould",
"value": "35000",
"sValue": "5"
}
]
},
{
"label": "Eastern Region",
"value": "1110000",
"data": [
{
"label": "Lee Miles",
"value": "18000",
"sValue": "-5"
},
{
"label": "Eduardo Day",
"value": "21000",
"sValue": "5"
},
{
"label": "Darrell Schultz",
"value": "29500",
"sValue": "10"
},
{
"label": "Troy Patrick",
"value": "25500",
"sValue": "12"
},
{
"label": "Kerry Smith",
"value": "30000",
"sValue": "15"
},
{
"label": "Franklin Walker",
"value": "18500",
"sValue": "-5"
},
{
"label": "Toby Brady",
"value": "28500",
"sValue": "-2"
},
{
"label": "Kenneth Wilkerson",
"value": "25000",
"sValue": "5"
},
{
"label": "Ralph Goodman",
"value": "36000",
"sValue": "10"
},
{
"label": "Lela Glover",
"value": "15500",
"sValue": "-14"
},
{
"label": "Warren Gordon",
"value": "25500",
"sValue": "-10"
},
{
"label": "Gladys Ruiz",
"value": "33000",
"sValue": "15"
},
{
"label": "Mabel Norris",
"value": "14000",
"sValue": "-5"
},
{
"label": "Darrel Rodgers",
"value": "17500",
"sValue": "-15"
},
{
"label": "Barry Larson",
"value": "20000",
"sValue": "2"
},
{
"label": "Alma Houston",
"value": "31000",
"sValue": "-3"
},
{
"label": "Rochelle Burke",
"value": "12500",
"sValue": "5"
},
{
"label": "Orville Garza",
"value": "34500",
"sValue": "-7"
},
{
"label": "Rex Nichols",
"value": "14500",
"sValue": "-10"
},
{
"label": "Jenna Burton",
"value": "18500",
"sValue": "8"
},
{
"label": "Jordan Little",
"value": "21000",
"sValue": "3"
},
{
"label": "Rodolfo Dawson",
"value": "28500",
"sValue": "10"
},
{
"label": "Darryl Bowen",
"value": "15500",
"sValue": "-10"
},
{
"label": "Marsha Foster",
"value": "12500",
"sValue": "-18"
},
{
"label": "Sandra Curtis",
"value": "32000",
"sValue": "19"
},
{
"label": "Alexis Robinson",
"value": "19500",
"sValue": "-4"
},
{
"label": "Courtney Stokes",
"value": "27500",
"sValue": "10"
},
{
"label": "Kelli Miller",
"value": "34500",
"sValue": "14"
},
{
"label": "Cathy Davis",
"value": "14500",
"sValue": "-16"
},
{
"label": "Gaynell Mcafee",
"value": "14000",
"sValue": "-5"
},
{
"label": "Trinidad Iverson",
"value": "24500",
"sValue": "5"
},
{
"label": "Anjelica Kilpatrick",
"value": "27000",
"sValue": "15"
},
{
"label": "Cheryle Hearn",
"value": "17500",
"sValue": "-10"
},
{
"label": "Rosamond Gass",
"value": "21000",
"sValue": "5"
},
{
"label": "Katharine Perrin",
"value": "12500",
"sValue": "-20"
},
{
"label": "Heide Matteson",
"value": "32000",
"sValue": "20"
},
{
"label": "Amparo Fortin",
"value": "25500",
"sValue": "10"
},
{
"label": "Charlena Bills",
"value": "19500",
"sValue": "-2"
},
{
"label": "Ronna Irizarry",
"value": "30000",
"sValue": "15"
},
{
"label": "Fidelia Hummel",
"value": "28000",
"sValue": "5"
},
{
"label": "Darlena Maher",
"value": "14500",
"sValue": "-7"
},
{
"label": "Isa Browning",
"value": "17000",
"sValue": "-10"
},
{
"label": "Dalene Baron",
"value": "22500",
"sValue": "10"
},
{
"label": "Ghislaine Loy",
"value": "12000",
"sValue": "-18"
},
{
"label": "Alexander Eldridge",
"value": "18500",
"sValue": "-2"
},
{
"label": "Brett Clemmons",
"value": "13000",
"sValue": "-15"
},
{
"label": "Mellie Hackney",
"value": "13000",
"sValue": "-18"
},
{
"label": "Gerry Felder",
"value": "35500",
"sValue": "15"
},
{
"label": "Librada Creighton",
"value": "17500",
"sValue": "-7"
},
{
"label": "Florence Pierce",
"value": "21000",
"sValue": "5"
}
]
},
{
"label": "Southern Region",
"value": "1555000",
"data": [
{
"label": "Derek Sandoval",
"value": "12000",
"sValue": "-15"
},
{
"label": "Bertha Bishop",
"value": "55000",
"sValue": "10"
},
{
"label": "Dominick Price",
"value": "24500",
"sValue": "10"
},
{
"label": "Sylvia Rodriquez",
"value": "15000",
"sValue": "-2"
},
{
"label": "Leland Jennings",
"value": "63000",
"sValue": "-5"
},
{
"label": "Dean Collins",
"value": "56000",
"sValue": "3"
},
{
"label": "Jamie Cohen",
"value": "19500",
"sValue": "4"
},
{
"label": "Elias Hammond",
"value": "29500",
"sValue": "12"
},
{
"label": "Kristy Stone",
"value": "24500",
"sValue": "5"
},
{
"label": "Jeanette Wood",
"value": "17500",
"sValue": "-10"
},
{
"label": "Salvador Colon",
"value": "75000",
"sValue": "18"
},
{
"label": "Victor Ferguson",
"value": "60000",
"sValue": "10"
},
{
"label": "Marion Hernandez",
"value": "14500",
"sValue": "-18"
},
{
"label": "Javier Erickson",
"value": "18000",
"sValue": "-19"
},
{
"label": "Stephanie Matthews",
"value": "16500",
"sValue": "5"
},
{
"label": "Deanna Russell",
"value": "25500",
"sValue": "1"
},
{
"label": "Nettie Holt",
"value": "32500",
"sValue": "-10"
},
{
"label": "Lynne Mack",
"value": "50000",
"sValue": "8"
},
{
"label": "Carrie Stevens",
"value": "47000",
"sValue": "14"
},
{
"label": "Janyce Hildebrand",
"value": "29000",
"sValue": "-5"
},
{
"label": "Emery Underhill",
"value": "67000",
"sValue": "20"
},
{
"label": "Priscila Coy",
"value": "72000",
"sValue": "15"
},
{
"label": "Dede Moffett",
"value": "12500",
"sValue": "-15"
},
{
"label": "Sydney Merchant",
"value": "65500",
"sValue": "10"
},
{
"label": "Daryl Farrar",
"value": "65000",
"sValue": "5"
},
{
"label": "Nella Nickerson",
"value": "27000",
"sValue": "14"
},
{
"label": "Octavia Mccorkle",
"value": "17500",
"sValue": "-2"
},
{
"label": "Lynsey Boren",
"value": "22500",
"sValue": "5"
},
{
"label": "Argentina Ireland",
"value": "15500",
"sValue": "-8"
},
{
"label": "Tonda Ricks",
"value": "14500",
"sValue": "-10"
},
{
"label": "Shira Laporte",
"value": "25500",
"sValue": "-5"
},
{
"label": "Reuben Upshaw",
"value": "12000",
"sValue": "-15"
},
{
"label": "Angelia Mcalister",
"value": "23500",
"sValue": "15"
},
{
"label": "Ludivina Teel",
"value": "19000",
"sValue": "-10"
},
{
"label": "Darcel Scarbrough",
"value": "13000",
"sValue": "-20"
},
{
"label": "Chantelle Carl",
"value": "14000",
"sValue": "2"
},
{
"label": "Young Chestnut",
"value": "14500",
"sValue": "-7"
},
{
"label": "Janetta Gilman",
"value": "17000",
"sValue": "-8"
},
{
"label": "Otto Pfeifer",
"value": "29500",
"sValue": "10"
},
{
"label": "Queen Trudeau",
"value": "70000",
"sValue": "15"
},
{
"label": "Candie Vang",
"value": "17000",
"sValue": "-12"
},
{
"label": "Tia Burgos",
"value": "21000",
"sValue": "12"
},
{
"label": "Teresita Sprague",
"value": "46500",
"sValue": "18"
},
{
"label": "Tomoko Shull",
"value": "17000",
"sValue": "-4"
},
{
"label": "Yahaira Snider",
"value": "24500",
"sValue": "8"
},
{
"label": "Zina Espinoza",
"value": "51000",
"sValue": "5"
},
{
"label": "Jamal Crespo",
"value": "12000",
"sValue": "-20"
},
{
"label": "Ariel Jorgensen",
"value": "16000",
"sValue": "5"
},
{
"label": "Fredda Tuttle",
"value": "14000",
"sValue": "-10"
},
{
"label": "Gerardo Carter",
"value": "34500",
"sValue": "-16"
}
]
},
{
"label": "Western Region",
"value": "1830000",
"data": [
{
"label": "Sadie Wells",
"value": "30000",
"sValue": "-10"
},
{
"label": "Jacqueline Griffith",
"value": "45000",
"sValue": "2"
},
{
"label": "Malcolm Lee",
"value": "55000",
"sValue": "18"
},
{
"label": "Martin Hudson",
"value": "59000",
"sValue": "-15"
},
{
"label": "Carlos Hart",
"value": "64000",
"sValue": "18"
},
{
"label": "Alison Luna",
"value": "35000",
"sValue": "-20"
},
{
"label": "Pablo Paul",
"value": "72000",
"sValue": "20"
},
{
"label": "Arlene Fox",
"value": "33000",
"sValue": "-15"
},
{
"label": "Lillian Young",
"value": "39000",
"sValue": "-5"
},
{
"label": "Annie Ford",
"value": "66000",
"sValue": "10"
},
{
"label": "Manuel Delgado",
"value": "46000",
"sValue": "-5"
},
{
"label": "Arthur Pope",
"value": "28000",
"sValue": "-15"
},
{
"label": "Antonia Marshall",
"value": "24000",
"sValue": "-17"
},
{
"label": "Glen Alexander",
"value": "29000",
"sValue": "15"
},
{
"label": "Myrtle Bass",
"value": "40000",
"sValue": "10"
},
{
"label": "Garry Palmer",
"value": "27000",
"sValue": "-18"
},
{
"label": "Dianne Blair",
"value": "35000",
"sValue": "-1"
},
{
"label": "Melba Page",
"value": "36000",
"sValue": "5"
},
{
"label": "Darla Nelson",
"value": "60000",
"sValue": "14"
},
{
"label": "Winston Brewer",
"value": "43000",
"sValue": "17"
},
{
"label": "Drew Osborne",
"value": "21000",
"sValue": "-12"
},
{
"label": "Jesus Sullivan",
"value": "46000",
"sValue": "18"
},
{
"label": "Jeremiah Flowers",
"value": "15000",
"sValue": "-20"
},
{
"label": "Suzanne Richardson",
"value": "24000",
"sValue": "-15"
},
{
"label": "Nicholas Mathis",
"value": "71000",
"sValue": "20"
},
{
"label": "Della King",
"value": "28000",
"sValue": "-10"
},
{
"label": "Beth Boone",
"value": "40000",
"sValue": "15"
},
{
"label": "Ruben Powell",
"value": "35000",
"sValue": "6"
},
{
"label": "Marlon Harrington",
"value": "14000",
"sValue": "-7"
},
{
"label": "Sharice Kang",
"value": "25000",
"sValue": "-20"
},
{
"label": "Lizette Stout",
"value": "55000",
"sValue": "15"
},
{
"label": "Jimmy Cho",
"value": "41000",
"sValue": "10"
},
{
"label": "Weston Alcorn",
"value": "21000",
"sValue": "-5"
},
{
"label": "Omer Whitfield",
"value": "18000",
"sValue": "-10"
},
{
"label": "Delora Downs",
"value": "35000",
"sValue": "2"
},
{
"label": "Rea Booker",
"value": "22000",
"sValue": "12"
},
{
"label": "Jon Blue",
"value": "73000",
"sValue": "20"
},
{
"label": "Haley Cameron",
"value": "17000",
"sValue": "-15"
},
{
"label": "Jani Fortune",
"value": "23000",
"sValue": "-15"
},
{
"label": "Theressa Talbot",
"value": "26000",
"sValue": "8"
},
{
"label": "Tashia Crane",
"value": "38000",
"sValue": "-2"
},
{
"label": "Latonya Grey",
"value": "19000",
"sValue": "-20"
},
{
"label": "Lyndsey Song",
"value": "40000",
"sValue": "15"
},
{
"label": "Lan Bean",
"value": "48000",
"sValue": "5"
},
{
"label": "Ethelene Haas",
"value": "52000",
"sValue": "10"
},
{
"label": "Lauran Dunaway",
"value": "29000",
"sValue": "8"
},
{
"label": "Williams Hodge",
"value": "14000",
"sValue": "-18"
},
{
"label": "Elwanda Archuleta",
"value": "24000",
"sValue": "-5"
},
{
"label": "Florida Andersen",
"value": "30000",
"sValue": "5"
},
{
"label": "Scott Perry",
"value": "20000",
"sValue": "2"
}
]
}
]
}
],
"colorrange": {
"mapbypercent": "1",
"gradient": "1",
"minvalue": "-25",
"code": "e24b1a",
"startlabel": "Decline",
"endlabel": "Rise",
"color": [
{
"code": "ffffff",
"maxvalue": "0",
"label": "Static"
},
{
"code": "6da81e",
"maxvalue": "25",
"label": "AVERAGE"
}
]
}
}<chart animation="0" hidetitle="1" plottooltext="<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>" horizontalpadding="1" verticalpadding="1" plotborderthickness=".5" plotbordercolor="666666" legendpadding="0" legenditemfontsize="10" legenditemfontbold="1" showlegend="1" legenditemfontcolor="3d5c5c" algorithm="squarified" caption="Harry's SuperMart: Sales Team Performance Analysis" legendscalelinethickness="0" legendcaptionfontsize="10" subcaption="Year Till Date" legendcaption="Growth in sales - Compared to previous year" theme="fusion">
<set label="USA" fillcolor="8c8c8c" value="8635000">
<set label="Northern Region" value="4140000">
<set label="Carol Francis" value="84000" svalue="15" />
<set label="Otis Newman" value="60000" svalue="10" />
<set label="Darlene Alvarez" value="50000" svalue="11" />
<set label="Lucas Cannon" value="58000" svalue="5" />
<set label="Rosalie Huff" value="36000" svalue="-5" />
<set label="Jerome Vargas" value="72000" svalue="14" />
<set label="Becky Barton" value="18000" svalue="-10" />
<set label="Ben Rios" value="14000" svalue="-5" />
<set label="Donnie Patton" value="37000" svalue="2" />
<set label="Dana Freeman" value="41000" svalue="5" />
<set label="Darren Barrett" value="54000" svalue="7" />
<set label="Steve Vaughn" value="35000" svalue="12" />
<set label="Roosevelt Rhodes" value="48000" svalue="15" />
<set label="Moses Sparks" value="38000" svalue="-4" />
<set label="Hope Cox" value="32000" svalue="-10" />
<set label="Hector Lowe" value="66000" svalue="15" />
<set label="Lori Christensen" value="47000" svalue="10" />
<set label="Roman Aguilar" value="14000" svalue="-15" />
<set label="Brittany Chandler" value="21000" svalue="-12" />
<set label="Tiffaney Battle" value="60000" svalue="10" />
<set label="Elin Stamps" value="54000" svalue="5" />
<set label="Donnetta Coley" value="59000" svalue="+14" />
<set label="Emmaline Halcomb" value="34000" svalue="-5" />
<set label="Natosha Hammett" value="39000" svalue="-7" />
<set label="Kimi Stegall" value="15000" svalue="-19" />
<set label="Norberto Kirk" value="46000" svalue="2" />
<set label="Noma Martindale" value="52000" svalue="12" />
<set label="Coreen Numbers" value="30000" svalue="-1" />
<set label="Chas Irvin" value="26000" svalue="-17" />
<set label="Carlo Tobin" value="31000" svalue="-14" />
<set label="Ayanna Mclain" value="29000" svalue="-5" />
<set label="Rolland Turney" value="42000" svalue="+5" />
<set label="Ona Roden" value="64000" svalue="+20" />
<set label="Drew Clarkson" value="24000" svalue="-20" />
<set label="Samuel Adler" value="29000" svalue="-15" />
<set label="Adrian Steen" value="51000" svalue="2" />
<set label="Xiao Batson" value="35000" svalue="-2" />
<set label="Britney Hammonds" value="45000" svalue="3" />
<set label="Roslyn Wilhelm" value="28000" svalue="-5" />
<set label="Alva Puente" value="26000" svalue="-8" />
<set label="Daina Horvath" value="49000" svalue="9" />
<set label="Louie Chaney" value="54000" svalue="15" />
<set label="Olympia Mcmullen" value="71000" svalue="14" />
<set label="Nichol Leclair" value="38000" svalue="-10" />
<set label="Marylou Messenger" value="41000" svalue="5" />
<set label="Christoper Crowley" value="34000" svalue="-4" />
<set label="Neville Venable" value="37000" svalue="-10" />
<set label="Brock Rowell" value="35000" svalue="-4" />
<set label="Gisele Pelletier" value="32000" svalue="-5" />
<set label="Thelma Caldwell" value="35000" svalue="5" />
<set label="Shyla Plunkett" value="84000" svalue="15" />
<set label="Joie Dickson" value="60000" svalue="10" />
<set label="Shana Nabors" value="50000" svalue="11" />
<set label="Catina Burris" value="58000" svalue="5" />
<set label="Man Spearman" value="36000" svalue="-5" />
<set label="Shaunna Hamby" value="72000" svalue="14" />
<set label="Stormy Read" value="18000" svalue="-10" />
<set label="Wen Coe" value="14000" svalue="-5" />
<set label="Elizebeth Poston" value="37000" svalue="2" />
<set label="Breanna Stringer" value="41000" svalue="5" />
<set label="Allyn Holly" value="54000" svalue="7" />
<set label="Lera Gaylord" value="35000" svalue="12" />
<set label="Lashunda Dowd" value="48000" svalue="15" />
<set label="Kiesha Tyner" value="38000" svalue="-4" />
<set label="Lamont Allman" value="32000" svalue="-10" />
<set label="Sun Switzer" value="66000" svalue="15" />
<set label="Dorene Small" value="47000" svalue="10" />
<set label="Cherlyn Bozeman" value="14000" svalue="-15" />
<set label="Stephani Contreras" value="21000" svalue="-12" />
<set label="Bebe Holcomb" value="60000" svalue="10" />
<set label="Shenika Barham" value="54000" svalue="5" />
<set label="Troy Hobbs" value="59000" svalue="+14" />
<set label="Thomas Tom" value="34000" svalue="-5" />
<set label="Sunshine Libby" value="39000" svalue="-7" />
<set label="Tambra Patten" value="15000" svalue="-19" />
<set label="Marlyn Cato" value="46000" svalue="2" />
<set label="Jeanelle Ham" value="52000" svalue="12" />
<set label="Armanda Kimble" value="30000" svalue="-1" />
<set label="Danna Fitzpatrick" value="26000" svalue="-17" />
<set label="Elmira Nagle" value="31000" svalue="-14" />
<set label="Bella Marx" value="29000" svalue="-5" />
<set label="Vania Meeks" value="42000" svalue="+5" />
<set label="Florencio Heffner" value="64000" svalue="+20" />
<set label="Amie Peoples" value="24000" svalue="-20" />
<set label="Chrystal Downs" value="29000" svalue="-15" />
<set label="Glennis Chisholm" value="51000" svalue="2" />
<set label="Sydney Castaneda" value="35000" svalue="-2" />
<set label="Gregory Drummond" value="45000" svalue="3" />
<set label="Birdie Neely" value="28000" svalue="-5" />
<set label="Ciera Mcafee" value="26000" svalue="-8" />
<set label="Martin Larose" value="49000" svalue="9" />
<set label="Bobette Dutton" value="54000" svalue="15" />
<set label="Numbers Yarbrough" value="71000" svalue="14" />
<set label="Sanjuanita Croteau" value="38000" svalue="-10" />
<set label="Alysha Aguirre" value="41000" svalue="5" />
<set label="Beau Welker" value="34000" svalue="-4" />
<set label="Yuri Brannon" value="37000" svalue="-10" />
<set label="Breana Marion" value="35000" svalue="-4" />
<set label="Bernardina Fennell" value="32000" svalue="-5" />
<set label="Bridgette Gould" value="35000" svalue="5" /></set>
<set label="Eastern Region" value="1110000">
<set label="Lee Miles" value="18000" svalue="-5" />
<set label="Eduardo Day" value="21000" svalue="5" />
<set label="Darrell Schultz" value="29500" svalue="10" />
<set label="Troy Patrick" value="25500" svalue="12" />
<set label="Kerry Smith" value="30000" svalue="15" />
<set label="Franklin Walker" value="18500" svalue="-5" />
<set label="Toby Brady" value="28500" svalue="-2" />
<set label="Kenneth Wilkerson" value="25000" svalue="5" />
<set label="Ralph Goodman" value="36000" svalue="10" />
<set label="Lela Glover" value="15500" svalue="-14" />
<set label="Warren Gordon" value="25500" svalue="-10" />
<set label="Gladys Ruiz" value="33000" svalue="15" />
<set label="Mabel Norris" value="14000" svalue="-5" />
<set label="Darrel Rodgers" value="17500" svalue="-15" />
<set label="Barry Larson" value="20000" svalue="2" />
<set label="Alma Houston" value="31000" svalue="-3" />
<set label="Rochelle Burke" value="12500" svalue="5" />
<set label="Orville Garza" value="34500" svalue="-7" />
<set label="Rex Nichols" value="14500" svalue="-10" />
<set label="Jenna Burton" value="18500" svalue="8" />
<set label="Jordan Little" value="21000" svalue="3" />
<set label="Rodolfo Dawson" value="28500" svalue="10" />
<set label="Darryl Bowen" value="15500" svalue="-10" />
<set label="Marsha Foster" value="12500" svalue="-18" />
<set label="Sandra Curtis" value="32000" svalue="19" />
<set label="Alexis Robinson" value="19500" svalue="-4" />
<set label="Courtney Stokes" value="27500" svalue="10" />
<set label="Kelli Miller" value="34500" svalue="14" />
<set label="Cathy Davis" value="14500" svalue="-16" />
<set label="Gaynell Mcafee" value="14000" svalue="-5" />
<set label="Trinidad Iverson" value="24500" svalue="5" />
<set label="Anjelica Kilpatrick" value="27000" svalue="15" />
<set label="Cheryle Hearn" value="17500" svalue="-10" />
<set label="Rosamond Gass" value="21000" svalue="5" />
<set label="Katharine Perrin" value="12500" svalue="-20" />
<set label="Heide Matteson" value="32000" svalue="20" />
<set label="Amparo Fortin" value="25500" svalue="10" />
<set label="Charlena Bills" value="19500" svalue="-2" />
<set label="Ronna Irizarry" value="30000" svalue="15" />
<set label="Fidelia Hummel" value="28000" svalue="5" />
<set label="Darlena Maher" value="14500" svalue="-7" />
<set label="Isa Browning" value="17000" svalue="-10" />
<set label="Dalene Baron" value="22500" svalue="10" />
<set label="Ghislaine Loy" value="12000" svalue="-18" />
<set label="Alexander Eldridge" value="18500" svalue="-2" />
<set label="Brett Clemmons" value="13000" svalue="-15" />
<set label="Mellie Hackney" value="13000" svalue="-18" />
<set label="Gerry Felder" value="35500" svalue="15" />
<set label="Librada Creighton" value="17500" svalue="-7" />
<set label="Florence Pierce" value="21000" svalue="5" /></set>
<set label="Southern Region" value="1555000">
<set label="Derek Sandoval" value="12000" svalue="-15" />
<set label="Bertha Bishop" value="55000" svalue="10" />
<set label="Dominick Price" value="24500" svalue="10" />
<set label="Sylvia Rodriquez" value="15000" svalue="-2" />
<set label="Leland Jennings" value="63000" svalue="-5" />
<set label="Dean Collins" value="56000" svalue="3" />
<set label="Jamie Cohen" value="19500" svalue="4" />
<set label="Elias Hammond" value="29500" svalue="12" />
<set label="Kristy Stone" value="24500" svalue="5" />
<set label="Jeanette Wood" value="17500" svalue="-10" />
<set label="Salvador Colon" value="75000" svalue="18" />
<set label="Victor Ferguson" value="60000" svalue="10" />
<set label="Marion Hernandez" value="14500" svalue="-18" />
<set label="Javier Erickson" value="18000" svalue="-19" />
<set label="Stephanie Matthews" value="16500" svalue="5" />
<set label="Deanna Russell" value="25500" svalue="1" />
<set label="Nettie Holt" value="32500" svalue="-10" />
<set label="Lynne Mack" value="50000" svalue="8" />
<set label="Carrie Stevens" value="47000" svalue="14" />
<set label="Janyce Hildebrand" value="29000" svalue="-5" />
<set label="Emery Underhill" value="67000" svalue="20" />
<set label="Priscila Coy" value="72000" svalue="15" />
<set label="Dede Moffett" value="12500" svalue="-15" />
<set label="Sydney Merchant" value="65500" svalue="10" />
<set label="Daryl Farrar" value="65000" svalue="5" />
<set label="Nella Nickerson" value="27000" svalue="14" />
<set label="Octavia Mccorkle" value="17500" svalue="-2" />
<set label="Lynsey Boren" value="22500" svalue="5" />
<set label="Argentina Ireland" value="15500" svalue="-8" />
<set label="Tonda Ricks" value="14500" svalue="-10" />
<set label="Shira Laporte" value="25500" svalue="-5" />
<set label="Reuben Upshaw" value="12000" svalue="-15" />
<set label="Angelia Mcalister" value="23500" svalue="15" />
<set label="Ludivina Teel" value="19000" svalue="-10" />
<set label="Darcel Scarbrough" value="13000" svalue="-20" />
<set label="Chantelle Carl" value="14000" svalue="2" />
<set label="Young Chestnut" value="14500" svalue="-7" />
<set label="Janetta Gilman" value="17000" svalue="-8" />
<set label="Otto Pfeifer" value="29500" svalue="10" />
<set label="Queen Trudeau" value="70000" svalue="15" />
<set label="Candie Vang" value="17000" svalue="-12" />
<set label="Tia Burgos" value="21000" svalue="12" />
<set label="Teresita Sprague" value="46500" svalue="18" />
<set label="Tomoko Shull" value="17000" svalue="-4" />
<set label="Yahaira Snider" value="24500" svalue="8" />
<set label="Zina Espinoza" value="51000" svalue="5" />
<set label="Jamal Crespo" value="12000" svalue="-20" />
<set label="Ariel Jorgensen" value="16000" svalue="5" />
<set label="Fredda Tuttle" value="14000" svalue="-10" />
<set label="Gerardo Carter" value="34500" svalue="-16" /></set>
<set label="Western Region" value="1830000">
<set label="Sadie Wells" value="30000" svalue="-10" />
<set label="Jacqueline Griffith" value="45000" svalue="2" />
<set label="Malcolm Lee" value="55000" svalue="18" />
<set label="Martin Hudson" value="59000" svalue="-15" />
<set label="Carlos Hart" value="64000" svalue="18" />
<set label="Alison Luna" value="35000" svalue="-20" />
<set label="Pablo Paul" value="72000" svalue="20" />
<set label="Arlene Fox" value="33000" svalue="-15" />
<set label="Lillian Young" value="39000" svalue="-5" />
<set label="Annie Ford" value="66000" svalue="10" />
<set label="Manuel Delgado" value="46000" svalue="-5" />
<set label="Arthur Pope" value="28000" svalue="-15" />
<set label="Antonia Marshall" value="24000" svalue="-17" />
<set label="Glen Alexander" value="29000" svalue="15" />
<set label="Myrtle Bass" value="40000" svalue="10" />
<set label="Garry Palmer" value="27000" svalue="-18" />
<set label="Dianne Blair" value="35000" svalue="-1" />
<set label="Melba Page" value="36000" svalue="5" />
<set label="Darla Nelson" value="60000" svalue="14" />
<set label="Winston Brewer" value="43000" svalue="17" />
<set label="Drew Osborne" value="21000" svalue="-12" />
<set label="Jesus Sullivan" value="46000" svalue="18" />
<set label="Jeremiah Flowers" value="15000" svalue="-20" />
<set label="Suzanne Richardson" value="24000" svalue="-15" />
<set label="Nicholas Mathis" value="71000" svalue="20" />
<set label="Della King" value="28000" svalue="-10" />
<set label="Beth Boone" value="40000" svalue="15" />
<set label="Ruben Powell" value="35000" svalue="6" />
<set label="Marlon Harrington" value="14000" svalue="-7" />
<set label="Sharice Kang" value="25000" svalue="-20" />
<set label="Lizette Stout" value="55000" svalue="15" />
<set label="Jimmy Cho" value="41000" svalue="10" />
<set label="Weston Alcorn" value="21000" svalue="-5" />
<set label="Omer Whitfield" value="18000" svalue="-10" />
<set label="Delora Downs" value="35000" svalue="2" />
<set label="Rea Booker" value="22000" svalue="12" />
<set label="Jon Blue" value="73000" svalue="20" />
<set label="Haley Cameron" value="17000" svalue="-15" />
<set label="Jani Fortune" value="23000" svalue="-15" />
<set label="Theressa Talbot" value="26000" svalue="8" />
<set label="Tashia Crane" value="38000" svalue="-2" />
<set label="Latonya Grey" value="19000" svalue="-20" />
<set label="Lyndsey Song" value="40000" svalue="15" />
<set label="Lan Bean" value="48000" svalue="5" />
<set label="Ethelene Haas" value="52000" svalue="10" />
<set label="Lauran Dunaway" value="29000" svalue="8" />
<set label="Williams Hodge" value="14000" svalue="-18" />
<set label="Elwanda Archuleta" value="24000" svalue="-5" />
<set label="Florida Andersen" value="30000" svalue="5" />
<set label="Scott Perry" value="20000" svalue="2" /></set>
</set>
<colorrange mapbypercent="1" gradient="1" minvalue="-25" code="e24b1a" startlabel="Decline" endlabel="Rise">
<color code="ffffff" maxvalue="0" label="Static" />
<color code="6da81e" maxvalue="25" label="AVERAGE" />
</colorrange>
</chart>Chart Atributes
Functional Attributes
These attributes let you control a variety of functional elements on the chart. For example, you can opt to show or hide the parent nodes, change the tiling algorithm, and so on.
This attribute gives you the option to control animation in your charts. If you do not want to animate any part of the chart, set this as 0.
Range: 0/1
This attribute sets the animation duration of the chart. animationDuration attribute is applicable only if animation of the chart is enabled.
Default value: 1 sec
Range: In seconds
When enabled in auto mode, long data labels are truncated by adding ellipses to prevent them from overflowing the chart background.
Default value: 1
Range: 0/1
When you right click on the chart it shows a context menu. This attribute allows you to show or hide the "Print" option in the context menu.
Range: 0/1
Using this attribute, you can set the tiling algorithm for the treemap chart.
Default value: squarified
Range: `sliceanddice`, `squarified`
If you opt to choose sliceanddice algorithm, using slicingMode you can set different views for your chart.
Default value : alternate
Range: alternate, horizontal, vertical
When this attribute is set to 0, it hides the parent node and the available space is used up by the leaf nodes.
Default value: 1
Range: 0/1
Using this attribute you can set the navigation bar which will either show the traversed path and will provide an ability to switch to any parent node in a click or a basic navigation bar which will only display the parent node.
Range: 0/1
When you set the value of the parentLabelLineHeight attribute to a particular value and drill down to a child level chart, the child chart header is assigned the default height once more.
If you want to assign the same header height to the parent chart as well as the child chart, use the navigationBarHeight attribute. Note that you can only assign a fixed range of values to this attribute, depending on the chart height. For instance, if the chart has a height of 350 px, you can only set the value of navigationBarHeight between 26px and 40 px. If you assign a value greater than 40 px to this attribute, it will be ignored.
Range: In Pixels
This attribute sets whether the child node label will be shown or hidden.
Default value: 0 (hidden)
Range: 0/1
This attributes sets the level of the depth for the chart which will be displayed at any given point of time.
Default value : Maximum depth
Range: 0 - nth level
This attribute lets you enable/disable the highlight effect, in the form of a fadeout, for the data plots corresponding to a legend item. When this attribute is enabled and the mouse pointer is hovered over a legend item label, plots belonging to the other data series fadeout, by reducing their opacity.
The fadeout effect can be customized by specifying the fadeout color and opacity using the color and alpha attributes. Eg. fadeout|color=#ff0000, alpha=60
Chart Message-related Attributes
These attributes let you set and configure custom chart messages, using text as well as images. These attributes are supported in FusionCharts constructor (FusionCharts({ })).
This attribute allows to set a custom font for all chart messages.
This attribute allows to set a custom font size for all chart messages.
Range: In pixels
This attribute allows to set a custom font color for all chart messages.
Range: Hex Color Code
This attribute allows to set a custom horizontal alignment for all images displayed as chart messages.
Default value: middle
Range: left, middle, right
This attribute allows to set a custom vertical alignment for all images displayed as chart messages.
Default value: middle
Range: top, middle, bottom
This attribute allows to set a transparency for all images displayed as chart messages.
Default value: 100
Range: 0 - 100
This attribute allows to set a scale for magnifying all images displayed as chart messages.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed when a chart begins to load. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set the font for the message displayed when a chart begins to load.
Range: Font Name
This attribute allows to set the font size for the message displayed when a chart begins to load.
Range: In pixels
This attribute allows to set the font color for the message displayed when a chart begins to load.
Range: Hex Color Code
If an image is displayed as the chart loadMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart loadMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart loadMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart loadMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed when the specified chart type is not supported. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set the font for the message displayed when the specified chart type is not supported.
Range: Font Name
This attribute allows to set the font size for the message displayed when the specified chart type is not supported.
Range: In pixels
This attribute allows to set the font color for the message displayed when the specified chart type is not supported.
Range: Hex Color Code
If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed if an error is encountered while rendering the chart. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set a font for the message displayed if an error is encountered while rendering the chart.
Range: Font Name
This attribute allows to set the font size for the message displayed if an error is encountered while rendering the chart.
Range: In pixels
This attribute allows to set the font color for the message displayed if an error is encountered while rendering the chart.
Range: Hex Color Code
If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart renderErrorMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart renderErrorMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed when chart data begins loading. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set a font for the message displayed when chart data begins loading.
Range: Font Name
This attribute allows to set the font size for the message displayed when chart data begins loading.
Range: In pixels
This attribute allows to set the font color for the message displayed when chart data begins loading.
Range: Hex Color Code
If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed if the data loaded for a chart is empty. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set the font for the message displayed if the data loaded for a chart is empty
Range: Font Name
This attribute allows to set the font size for the message displayed if the data loaded for a chart is empty.
Range: In pixels
This attribute allows to set the font color for the message displayed if the data loaded for a chart is empty.
Range: Hex Color Code
If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed if an error is encountered while loading chart data. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set a font for the message displayed if an error is encountered while loading chart data.
Range: Font Name
This attribute allows to set the font size for the message displayed if an error is encountered while loading chart data.
Range: In pixels
This attribute allows to set the font color for the message displayed if an error is encountered while loading chart data.
Range: Hex Color Code
If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
This attribute allows to set the message to be displayed if the data to be loaded for the chart is invalid. To display an image as the chart message, prefix I- to the image URL.
This attribute allows to set the font for the message displayed if the specified chart data is invalid.
Range: Font Name
This attribute allows to set the font size for the message displayed if the specified chart data is invalid.
Range: In pixels
This attribute allows to set the font color for the message displayed if the specified chart data is invalid.
Range: Hex Color Code
If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom horizontal alignment for the image.
Default value: value assigned to the baseChartMessageImageHAlign attribute
Range: left, middle, right
If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom vertical alignment for the image.
Default value: value assigned to the baseChartMessageImageVAlign attribute
Range: top, middle, bottom
If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the transparency of the image.
Default value: 100
Range: 0 - 100
If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the scale for magnifying the image.
Default value: 100
Range: 0-300
Chart Titles and Axis Names
Using these attributes, you can set the chart caption and sub-caption.
Caption of the chart.
Sub-caption of the chart.
Chart Caption Cosmetics
These attributes let you configure the cosmetics of the chart caption and sub-caption.
Sets horizontal alignment of caption
Range: "left", "center", "right"
Sets whether caption should be on top of the data plot area
Range: 0/1
Sets the caption font size (in pixels). Besides pixels (px) values can also be defined in rem, %, em, and vw.
Range: 6 - 72
Sets the sub-caption font size (in pixels). Besides pixels (px) values can also be defined in rem, %, em, and vw.
Range: 6 - 72
Sets the caption font family
Range: Font Name
Sets the sub-caption font family
Range: Font Name
Sets the caption font color
Range: Hex Color Code
Sets the sub-caption font color
Range: Hex Color Code
Sets whether the caption should be bold formatted
Range: 0/1
Sets whether the sub-caption should be bold formatted
Range: 0/1
Sets whether the caption is aligned with the canvas (if set to 1) or with the entire chart area (if set to 0).
Range: 0/1
Sets the padding for the chart caption (in pixels) if the caption is not centre aligned.
Will be ignored if caption is centre aligned.
Range: In Pixels
Chart Cosmetics
The following attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.
Sets whether to show a border around the chart.
Range: 0/1
Sets the chart border color.
Range: Hex Color Code
Sets the chart border thickness.
Range: In Pixels
Sets the chart border's transparency.
Range: 0 - 100
Sets the chart background color. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: #FF5904, #FFFFFF.
Range: Hex Color Code
Sets the chart background transparency. If you have opted for gradient background, you need to set a list of alpha(s) separated by comma.
Range: 0 - 100
If you have opted for a gradient background, this attribute lets you set the ratio of each color constituent.
Range: 0 - 100
Angle of the background color, in case of a gradient.
Range: 0-360
To place any image (JPG/PNG/GIF) as background of the chart, enter the (path and) name of the background image. It should be in the same domain as the chart.
Sets the background image transparency.
Range: 0 - 100
Helps you specify the mode in which the background image is to be displayed.
Possibel values: stretch: Expands the image to fit the entire chart area, without maintaining original image constraints. tile: The image is repeated as a pattern on the entire chart area. fit: Fits the image proportionately on the chart area. fill: The entire chart area is proportionately filled with the image. center: The image is positioned at the center of the chart area. none: Default mode.
Range: stretch, tile, fit, fill, center, none
Sets the vertical alignment of the background image.
Range: left, center, right
Sets the horizontal alignment of the background image.
Range: left, center, right
Sets the magnifying value for the background image. This attribute will only work when the attribute bgImageDisplayMode is set to none, center, or tile.
Range: 0-300
Lets you specify the URL to load an external logo (JPEG/PNG) to your chart. Due to cross domain security restrictions, it is advised to use a logo from the same domain name as your charts.
Range: URL
This attribute helps you set the amount of empty space that you want to put on the left side of your logo image. Nothing is rendered in this space.
Range: In Pixels
This attribute helps you set the amount of empty space that you want to put on top of your logo image. Nothing is rendered in this space.
Range: In Pixels
Sets the logo position on the chart.
Possible values: TL: Top-left TR: Top-right BR: Bottom right BL: Bottom left CC: Center of screen
Range: TL, TR, BL, BR, CC
Sets the logo transparency.
Range: 0 - 100
Sets the magnifying scale of the externally loaded logo at run-time.
Range: 0-300
If you want to link the logo to an external URL, specify the link in this attribute. The link can be in the FusionCharts Link Format, allowing you to link to new windows, pop-ups, frames etc.
Range: Url
Sets the background color only for those nodes which are not leaf nodes.
Default value: #E5E5E5
Range: Hex Color Code
Groups all leaf nodes belonging to a parent node and visualizes them as masked units when hovered upon.
Default value: 0
Range: 0/1
Sets the tooltip text rendered when the mouse pointer is hovered over the Back to Top button, in the top-right corner of the chart.
Default value: Back to Top
Sets the tooltip text rendered when the mouse pointer is hovered over the Back to Parent button, in the top-right corner of the chart.
Default value: Back to Parent
Sets the fill color for individual rectangles
Range: Hex Color Code
Lets you specify font color for the texts of the rectangles in set label.
Range: Hex Color Code
Data Plot Cosmetics
These attributes let you configure how your plot (columns, lines, area, pie or any data that you're plotting) would appear on the chart. If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes. Various other controls over plot cosmetics can be attained using this set of attributes.
Sets the border color for the node. This attribute is used to specify the color for the plot border at the chart instance level.
Range: Hex Color Code
Sets the border thickness for the node. This attribute is used to specify the thickness for the plot border at chart instance, data plot, and data-series levels.
Range: 0-5
Data Label Cosmetics
These attributes let you configure the cosmetics of the node labels rendered on the chart.
Sets the line height, in pixels, for the parent node label.
Default value: 12
Range: 0 - 100
Sets the font size for the node labels. Besides pixels (px) values can also be defined in rem, %, em, and vw.
Range: 6 - 72
Sets the font family for the node labels.
Range: Font Names
Sets the font color for all the node labels.
Range: Hex Color Code
Sets whether the node labels will be bold formatted.
Default value: 0
Range: 0/1
Sets whether the node labels will be formatted in italics.
Default value: 0
Range: 0/1
Chart Padding & Margins
The following attributes help you control chart margins and paddings. FusionCharts Suite XT allows you manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionCharts Suite XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent, which configures the spacing using percentage values). You can also define the chart margins. Chart Margins refer to the empty space left on the top, bottom, left and right of the chart. That means, FusionCharts Suite XT would not plot anything in that space. It is not necessary for you to specify any padding or margin values. FusionCharts Suite XT automatically assumes the best values for the same, if you do not specify the same.
Lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither caption, nor sub-caption is defined, this padding does not come into play.
Range: In Pixels
Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space.
Range: In Pixels
Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space.
Range: In Pixels
Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space.
Range: In Pixels
Amount of empty space that you want to put at the bottom of your chart. Nothing is rendered in this space.
Range: In Pixels
Padding of legend from right or bottom side of canvas
Range: In Pixels
Lets you control the space between the start of chart canvas and the start (x) of chart. In case of 2D charts, the canvas is the visible rectangular box. Using this attribute, you can control the amount of empty space between the chart left side and canvas left side. By default, the chart automatically calculates this space depending on the elements to be placed on the chart. However, if you want to over-ride this value with a higher value, you can use this attribute to specify the same. Please note that you cannot specify a margin lower than what has been calculated by the chart. This attribute is particularly useful, when you have multiple charts placed in a page and want all their canvas start position to align with each other - so in such a case, you can set same margin value (a value large enough that it does not get rejected by chart owing to it being lower than the calculated value) for all such charts in the page.
Range: In Pixels
Like canvasLeftMargin, lets you set the space between end of canvas and end of chart.
Range: In Pixels
Like canvasLeftMargin, lets you set the space between top of canvas and top of chart.
Range: In Pixels
Like canvasLeftMargin, this attribute lets you set the space between bottom of canvas and bottom of chart.
Range: In Pixels
Lets you configure the horizontal padding (space) between the parent rectangle and the logical container where children get plotted.
Default value: 5
Range: In Pixels
Lets you configure the vertical padding (space) between the parent rectangle and the logical container where children get plotted.
Default value: 5
Range: In Pixels
Tooltip Attributes
These attributes let you control the tool tip formatting.
Whether to show tool tip on chart.
Range: 0/1
Background color for the tool tip.
Range: Hex Color Code
Font color for the tool-tip.
Range: Hex Color Code
Border color for tool tip.
Range: Hex Color Code
Sets the border transparency for tool tip.
Range: 0 - 100
The character specified as the value of this attribute separates the data label and data value displayed in the tool tip.
Specify custom text for the tooltip
You can either specify a constant string as the tooltip text or you can use variable values from the data level by prefixing a $ to the attribute name, for example, $name, $value.
Configure the tooltip's position.
Range: auto, top and bottom
Toolbar Attributes
Using this set of attributes, you can customize the toolbar on the chart. The advantage of having a toolbar is that it manages all the UI action elements (context menus, checkboxes, buttons) centrally. This provides a clean, uniform look and a better, more meaningful and logical grouping.
Where to position the toolbar on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen
Range: TL, TR, BL, BR, CC
Sets the toolbox position on the chart with respect to x-axis.
Sets the toolbox position on the chart with respect to y-axis.
Sets the horizontal alignment of the toolbar on the chart.
Range: Left, Right
Sets the vertical alignment of the toolbar on the chart
Range: Top, Bottom
Sets the color of the toolbar buttons.
Range: Any (color code without the # prefix)
Enables/disables display of tooltips for toolbar buttons.
Range: 0/1
You can change the scale of the toolbar by specifying a value for this attribute.
You can reverse the order in which the toolbar icons are rendered using this attribute.
Range: 0/1
Attributes for Exporting Charts
These attributes allow you to control the saving of chart as image, SVG or XLSX.
Whether the chart will allow exporting to images, PDFs, SVG, XLSX or CSV format.
Default value: 0
Range: 0/1
In case of server-side exporting, the action specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server.
Default value: download
Range: 'save' or 'download'
In case of server side exporting, this refers to the path of the server-side export handler (the ready-to-use scripts that we provide).
Lets you configure what output formats to allow for export of chart, in the export context menu, and also customize the label for each menu item. The attribute value should be a pipe (|) delimited separated key-value pair. Example: exportFormats: 'PNG=Export as High Quality Image|JPG|PDF=Export as PDF File'
This attributes sets the modes of export. To enable client-side exporting, set this attribute to client.
Default value: auto.
Note: Starting v3.12.1, the exportMode attribute replaces the exportAtClientSide attribute. However, you don’t need to make any changes to the existing setup because, the FusionCharts library comes with the proper mapping already provided.
Whether the menu items related to export (e.g., Save as JPEG etc.) will appear in the context menu of chart.
Range: 0/1
In case of server-side exporting and when using download as action, this lefts you configure whether the return image, PDF, SVG or XLSX will open in same window (as an attachment for download), or whether it will open in a new window.
Default value: _self
Range: '_self' or '_blank'
Using this attribute you can specify the name (excluding the extension) of the output (export) file.
Data Plot Hover Effects
If you wish to show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over the data plot, these attributes let you configure the cosmetics of the hover for all data plots in the chart.
Whether to enable hover effect on charts for all elements
Range: 0/1
Whether to enable hover effect on charts for data plots (e.g., column, pie) only
Range: 0/1
Specifies the hover color for the data plots
Range: Hex Color Code
Specifies the hover alpha for data plots
Range: 1 - 100
Legend Properties
In multi-series charts, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same. Also, the legend can be placed at the bottom of the chart or to the right of the chart. Using the attributes below, you can configure the functional and cosmetic properties of the legend.
Sets whether to show legend on the chart.
Range: 0/1
Sets whether legend keys should be bold formatted.
Range: 0/1
Sets the legend item font
Range: Font Name
Sets the legend item font size
Range: 6 - 72
Sets the legend item font color
Range: Hex Color Code
Enables to set a caption for the entire legend
Range:
Sets the legend caption horizontal alignment .
Range: "left", "center", "right"
Sets whether legend caption should be bold formatted
Range: 0/1
Sets the legend caption font
Range: Font Name
Sets the legend caption font size
Range: 6 - 72
Sets the legend caption font color
Range: Hex Color Code
The legend can be plotted at different positions with respect to the chart. Note that if the value of legendPosition is set to absolute, you also need to set the coordinates of the legend. You can do that using the attributes legendXPosition and legendYPosition, both of which accept absolute or percentage values.
Range: bottom, right, top, top-left, top-right, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom, and absolute
When the value of legendPosition is set to absolute, use this attribute to set the X-coordinate of the legend. It accepts absolute or percentage values. By default, its value is set to 0.
Range: 0 to chart width (in pixels)
When the value of legendPosition is set to absolute, use this attribute to set the Y-coordinate of the legend. It accepts absolute or percentage values. By default, its value is set to 0.
Range: 0 to chart height (in pixels)
Sets the number of rows the legend should display.
Sets the number of columns the legend should display.
Sets the legend background color.
Range: Hex Color Code
Sets the legend background transparency.
Range: 0 - 100
Sets the legend border color.
Range: Hex Color Code
Sets the legend border thickness.
Range: In Pixels
Sets the legend border's transparency.
Range: 0 - 100
Sets whether to show a shadow for legend.
Range: 0/1
Sets whether the legend will be drag-able. If set to 1, end viewers of the chart can drag the legend around on the chart.
Range: 0/1
Sets the color of the gradient legend scale.
Range: Hex Color Code
Sets the transparency of the gradient legend scale.
Range: 0 - 100
Sets the thickness of the gradient legend scale.
Range: 0-5
Sets color for the gradient legend's axis border.
Range: Hex Color Code
Sets transparency for the gradient legend's axis border.
Range: 0 - 100
Font Properties
Using the attributes below, you can define the generic font properties for all the text on the chart. These attributes allow you a high level control over font properties. If you intend to specify font properties for individual chart elements (like Caption, sub-caption etc.), you'll need to use the Styles feature of PowerCharts XT. Using Styles, you can also specify advanced font properties like Bold, Italics, HTML Mode etc.
Sets the font face (family) for all the text (data labels, values etc.) on chart. If you specify the outCnvBaseFont attribute also, then this attribute controls only the font face of the text within the chart canvas bounds.
Range: Font Name
Sets the base font size for all the text that lies within the chart canvas. Besides pixels (px) values can also be defined in rem, %, em, and vw.
Range: 6 - 72
Sets the base font color for all the text that lies within the chart canvas.
Range: Hex Color Code
Sets the base font family for all the text that lies outside the chart canvas.
Range: Font Name
Sets the base font size for all the text that lies outside the chart canvas. Besides pixels (px) values can also be defined in rem, %, em, and vw.
Range: 6 - 72
Sets the base font color for all the text that lies outside the chart canvas..
Range: Hex Color Code
The data Object
In single-series charts, each instance of the data object represents a data value to be plotted on the chart. For a single-series chart, one instance of the data object looks as shown in the example below:
"data"[{
"label": "Jan",
"value": "10000"
}]
The following attributes of the data object are used to set and configure data values for the treemap chart.
Sets the label for a node.
Note: The label attribute replaces the name attribute. Previously, either one of the attributes could be used to set the label. Support for the name attribute has been discontinued since v3.10.0.
Sets the value and maps the area of the rectangle (node).
Sets the secondary value and maps the color of the rectangle (node).
Sets the fill color for a node
Range: Hex Color Code
Sets the font color for a node label
Range: Hex Color Code
The colorRange Object
Attributes of the colorRange object for the treemap chart are used to define the type of legend, the lower limit of the scale, and the start and end labels. Note that the colorRange object is not used to collectively configure all ranges; the color object (child of the colorRange object) is used to do that.
Sets the lower limit label for the gradient scale.
Sets the upper limit label for the gradient scale.
Sets whether the gradient legend will be displayed.
Range: 0/1
Sets whether the data values will be rendered in percentage.
Range: 0/1
Sets the minimum value or the lower limit of the numeric range and the gradient scale.
The color Object
The attributes of the color object, child of the colorRange object, are used to configure individual numeric ranges for categorizing the treemap chart nodes.
Sets the color for a numeric range.
Range: Hex Color Code
Sets the label for a numeric range. The label appears on the gradient scale.
Note: The label attribute replaces the name attribute. Previously, either one of the attributes could be used to set the label. Support for the name attribute has been discontinued since v3.10.0.
Sets the upper limit of a numeric range.
Sets the lower limit of a numeric range.