Advanced Charts

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)”}}]}}}

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping