[heading header_type=”h1″ sub_header_size=”lead” header_size=”hyper” header_weight=”hairline” header_align=”center” header_condensed=”condensed” header_underline=”bordered” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”tall-bottom” scroll_animation=”fadeInDown” scroll_animation_delay=”0.2″ sub_header=”Create amazing HTML5 charts easily in WordPress. A flexible and lightweight WordPress chart plugin including 6 customizable chart types” section_swatch_override=”off” heading_colour=”#000000″]Charts[/heading]
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”right” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Line charts[/heading]
Line graphs are probably the most widely used graph for showing trends. Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.
[chart type=”line” datasets=”40,43,61,50, 45, 30 next 33,15,40,22, 18, 10″ colors=”#83C8EC, #757575″ labels=”June, July, August, Sep, Oct, Nov” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”true” scalesteps=”6″ scalestepwidth=”10″ scalestartvalue=”0″ animation=”true” fillopacity=”0.7″ pointstrokecolor=”#ffffff” margin_top=”medium-top” margin_bottom=”medium-bottom” scroll_animation=”none” scroll_animation_delay=”0″ width=”500px” canvaswidth=”500px” canvasheight=”400px” relativewidth=”1.25″ height=”400px”]
[chart type=”pie” data=”30,10,55,25,15,8″ colors=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” labels=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” width=”70%” animation=”false” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”false” scalesteps=”null” scalestepwidth=”null” scalestartvalue=”null” fillopacity=”0.7″ pointstrokecolor=”#ffffff” margin_top=”normal-top” margin_bottom=”short-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0″]
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”left” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInRight” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Pie charts[/heading]
Pie charts are great at comparing proportions within a single data set. Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”right” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Doughnut charts[/heading]
Similar to pie charts, doughnut charts are great for showing proportional data. Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.
[chart type=”doughnut” data=”30,10,55,25,15,8″ colors=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” labels=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” width=”70%” animation=”false” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”false” scalesteps=”null” scalestepwidth=”null” scalestartvalue=”null” fillopacity=”0.7″ pointstrokecolor=”#ffffff” margin_top=”normal-top” margin_bottom=”short-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0″]
[chart type=”radar” datasets=”20,22,40,25,55 next 15,20,30,40,35″ colors=”#93979b,#82c9ed” labels=”design, drinking, coding, playing, bloging” width=”70%” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”false” scalesteps=”null” scalestepwidth=”null” scalestartvalue=”null” animation=”true” fillopacity=”0.7″ pointstrokecolor=”#FFFFFF” margin_top=”normal-top” margin_bottom=”short-bottom” scroll_animation=”fadeInRight” scroll_animation_delay=”0″]
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”left” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInRight” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Radar charts[/heading]
Radar charts are good for comparing a selection of different pieces of data. Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you’d expect.
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”right” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Polar area charts[/heading]
Polar area charts are similar to pie charts, but the variable isn’t the circumference of the segment, but the radius of it. Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.
[chart type=”polararea” data=”30,10,55,25,15,8″ colors=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” labels=”b6b8bb,#93979b,#83c8ec,#e9e9e9,#757575,#3c3c3c” width=”70%” animation=”false” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”false” scalesteps=”null” scalestepwidth=”null” scalestartvalue=”null” fillopacity=”0.7″ pointstrokecolor=”#ffffff” margin_top=”normal-top” margin_bottom=”short-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0″]
[chart type=”bar” datasets=”40,43,61,50, 45, 30 next 33,15,40,22, 18, 10″ colors=”#83C8EC, #757575″ labels=”June, July, August, Sep, Oct, Nov” scalefontsize=”12″ scalefontcolor=”#666666″ scaleoverride=”true” scalesteps=”6″ scalestepwidth=”10″ scalestartvalue=”0″ animation=”true” fillopacity=”0.7″ pointstrokecolor=”#ffffff” margin_top=”medium-top” margin_bottom=”medium-bottom” scroll_animation=”none” scroll_animation_delay=”0″ width=”500px” canvaswidth=”500px” canvasheight=”400px” relativewidth=”1.25″ height=”400px”]
[heading header_type=”h2″ sub_header_size=”normal” header_size=”bigger” header_weight=”hairline” header_align=”default” header_condensed=”not-condensed” header_underline=”no-bordered-header” header_underline_size=”bordered-normal” margin_top=”tall-top” margin_bottom=”no-bottom” scroll_animation=”fadeInLeft” scroll_animation_delay=”0.2″ section_swatch_override=”off” heading_colour=”#000000″]Bar charts[/heading]
Bar graphs are also great at showing trend data. Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.