Advanced Charts

Home/Elements/Advanced Charts

Pie Chart

{«type»:»pie»,»data»:{«labels»:[«Item 01″,»Item 02″,»Item 03″,»Item 04″,»Item 05″],»datasets»:[{«backgroundColor»:[«#FFB900″,»#0148F7″,»#042367″,»#FB3535″,»#FF7C42″],»hoverBackgroundColor»:[«#FFB900″,»#0148F7″,»#042367″,»#FB3535″,»#FF7C42″],»data»:[«14″,»24″,»24″,»14″,»14″],»borderWidth»:0,»borderColor»:»rgba(0, 0, 0, 0)»}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»cutoutPercentage»:0,»tooltips»:{«enabled»:true,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10,»footerFontSize»:15,»footerFontColor»:»#111″},»legend»:{«display»:false,»position»:»right»,»labels»:{«usePointStyle»:true,»padding»:16,»boxWidth»:16,»fontSize»:15}}}}

Donut Chart

{«type»:»pie»,»data»:{«labels»:[«Item 01″,»Item 02″,»Item 03″,»Item 04″,»Item 05″],»datasets»:[{«backgroundColor»:[«#FFB900″,»#0148F7″,»#042367″,»#FB3535″,»#FF7C42″],»hoverBackgroundColor»:[«#FFB900″,»#0148F7″,»#042367″,»#FB3535″,»#FF7C42″],»data»:[«14″,»24″,»24″,»14″,»14″],»borderWidth»:0,»borderColor»:»rgba(0, 0, 0, 0)»}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»cutoutPercentage»:50,»tooltips»:{«enabled»:true,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10,»footerFontSize»:15,»footerFontColor»:»#111″},»legend»:{«display»:false,»position»:»right»,»labels»:{«usePointStyle»:true,»padding»:16,»boxWidth»:16,»fontSize»:15}}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:false,»backgroundColor»:»rgba(105, 59, 255, 0.55)»,»borderColor»:»rgba(105, 59, 255, 0.55)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 02″,»fill»:false,»backgroundColor»:»rgba(0, 110, 253, 0.56)»,»borderColor»:»rgba(0, 110, 253, 0.56)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:false,»backgroundColor»:»rgba(105, 59, 255, 0.55)»,»borderColor»:»rgba(105, 59, 255, 0.55)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 02″,»fill»:false,»backgroundColor»:»rgba(0, 110, 253, 0.56)»,»borderColor»:»rgba(0, 110, 253, 0.56)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:false,»backgroundColor»:»#693BFF»,»borderColor»:»#693BFF»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 02″,»fill»:false,»backgroundColor»:»#006EFD»,»borderColor»:»#006EFD»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»rect»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 03″,»fill»:false,»backgroundColor»:»#E82219″,»borderColor»:»#E82219″,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»triangle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«23″,»27″,»24″,»26″,»25″,»28″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 04″,»fill»:false,»backgroundColor»:»#71AEFE»,»borderColor»:»#71AEFE»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»star»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«25″,»31″,»24″,»26″,»30″,»22″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:true,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:false,»backgroundColor»:»#693BFF»,»borderColor»:»#693BFF»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 02″,»fill»:false,»backgroundColor»:»#006EFD»,»borderColor»:»#006EFD»,»borderCapStyle»:»butt»,»borderDash»:[16,8],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 03″,»fill»:false,»backgroundColor»:»#E82219″,»borderColor»:»#E82219″,»borderCapStyle»:»butt»,»borderDash»:[3,3],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«23″,»27″,»24″,»26″,»25″,»28″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:true,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:true,»backgroundColor»:»rgba(105, 59, 255, 0.55)»,»borderColor»:»rgba(105, 59, 255, 0.55)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3},{«label»:»Item 02″,»fill»:true,»backgroundColor»:»rgba(0, 110, 253, 0.56)»,»borderColor»:»rgba(0, 110, 253, 0.56)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:5,»pointHoverBorderWidth»:1,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2,»pointRadius»:4,»pointHitRadius»:3}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Line Chart

{«type»:»line»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»fill»:true,»backgroundColor»:»rgba(105, 59, 255, 0.55)»,»borderColor»:»rgba(0, 0, 0, 0)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:1,»pointHoverBorderWidth»:0,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«15″,»10″,»22″,»19″,»23″,»17″],»borderWidth»:0,»pointRadius»:1,»pointHitRadius»:0},{«label»:»Item 02″,»fill»:true,»backgroundColor»:»rgba(0, 110, 253, 0.56)»,»borderColor»:»rgba(0, 0, 0, 0)»,»borderCapStyle»:»butt»,»borderDash»:[],»borderDashOffset»:0,»borderJoinStyle»:»miter»,»spanGaps»:false,»showLine»:true,»steppedLine»:false,»pointStyle»:»circle»,»pointBorderWidth»:1,»pointHoverRadius»:1,»pointHoverBorderWidth»:0,»hidden»:false,»lineTension»:0.33299999999999996,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:0,»pointRadius»:1,»pointHitRadius»:0}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Bar Chart

{«type»:»bar»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»backgroundColor»:»rgba(105, 59, 255, 1)»,»borderColor»:»rgba(105, 59, 255, 1)»,»data»:[«15″,»35″,»22″,»19″,»23″,»17″],»borderWidth»:0},{«label»:»Item 02″,»backgroundColor»:»rgba(0, 110, 253, 1)»,»borderColor»:»rgba(0, 110, 253, 1)»,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:0}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Bar Chart

{«type»:»bar»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»backgroundColor»:»rgba(105, 59, 255, 0.7)»,»borderColor»:»#693BFF»,»data»:[«15″,»35″,»22″,»19″,»23″,»17″],»borderWidth»:2},{«label»:»Item 02″,»backgroundColor»:»rgba(0, 110, 253, 0.7)»,»borderColor»:»rgba(0, 110, 253, 1)»,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Bar Chart

{«type»:»horizontalBar»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»backgroundColor»:»rgba(105, 59, 255, 1)»,»borderColor»:»rgba(105, 59, 255, 1)»,»data»:[«15″,»35″,»22″,»19″,»23″,»17″],»borderWidth»:0},{«label»:»Item 02″,»backgroundColor»:»rgba(0, 110, 253, 1)»,»borderColor»:»rgba(0, 110, 253, 1)»,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:0}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}

Bar Chart

{«type»:»horizontalBar»,»data»:{«labels»:[«Jul»,»Aug»,»Sep»,»Oct»,»Nov»,»Dec»],»datasets»:[{«label»:»Item 01″,»backgroundColor»:»rgba(105, 59, 255, 0.7)»,»borderColor»:»#693BFF»,»data»:[«15″,»35″,»22″,»19″,»23″,»17″],»borderWidth»:2},{«label»:»Item 02″,»backgroundColor»:»rgba(0, 110, 253, 0.7)»,»borderColor»:»rgba(0, 110, 253, 1)»,»data»:[«34″,»38″,»35″,»33″,»37″,»40″],»borderWidth»:2}]},»options»:{«animation»:{«duration»:2000},»maintainAspectRatio»:true,»tooltips»:{«enabled»:true,»mode»:»index»,»intersect»:false,»bodySpacing»:8,»titleSpacing»:6,»cornerRadius»:8,»xPadding»:10},»legend»:{«display»:true,»position»:»bottom»,»labels»:{«usePointStyle»:false,»padding»:20,»boxWidth»:16}},»scales»:{«yAxes»:[{«ticks»:{«fontColor»:»222″,»beginAtZero»:true},»gridLines»:{«color»:»rgba(43, 43, 43, 0.2)»,»zeroLineColor»:»rgba(43, 43, 43, 0.6)»}}]}}}