Advanced Charts
December 25, 2019 2019-12-25 4:03Advanced 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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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.3329999999999999626965063725947402417659759521484375,"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.3329999999999999626965063725947402417659759521484375,"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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":0,"pointHoverRadius":0,"pointHoverBorderWidth":0,"hidden":false,"lineTension":0.3329999999999999626965063725947402417659759521484375,"data":["15","10","22","19","23","17"],"borderWidth":0,"pointRadius":0,"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":0,"pointHoverRadius":0,"pointHoverBorderWidth":0,"hidden":false,"lineTension":0.3329999999999999626965063725947402417659759521484375,"data":["34","38","35","33","37","40"],"borderWidth":0,"pointRadius":0,"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":[{"display":true,"scaleLabel":{"display":true,"fontColor":"#ff0000","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":"111","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":"111","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":"111","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}
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":"111","fontSize":16,"beginAtZero":true},"gridLines":{"color":"#ebebeb","zeroLineColor":"#ebebeb"}}]}}}