Chart maker

Build a chart, then copy the code into any web page.

Your charts

Your work is kept in this browser as you go. Save gives a chart a name so you can come back to it.

    Open from code

    Chart

    # stands for the number. Try $#, #% or #kg.

    Data

    Type straight into the table, or paste rows from a spreadsheet. Values start at zero.

    Look

    Drop it to 0 for a see-through chart that sits on your page's own background. Set the text colour to suit that page. Series and slice colours are in the data table.

    Fonts

    Pick from the list or type any font the viewer's device has, or one your page already loads. Leave a box empty to use the main font.

    FontSize Title Legend Footnote Axis Hover box

    Axis covers both the number and label axes. The hover box is what pops up when you hover or tap. Make it bigger for phones.

    Spacing

    All in pixels. The chart re-fits itself as you move things.

    Axis labels only affects line and bar charts.

    Size and motion

    The chart fills whatever div it sits in. Leave height empty to let it keep a 5:3 shape as the div gets wider or narrower.

    Every chart on one page needs its own ID.

    Preview

    Hover or tap anywhere on the chart to see the numbers. Tap the arrow to replay.

    Your code