Online Chart & Graph Generator

What is a chart & graph generator?

A chart and graph generator turns a set of numbers into a picture you can read at a glance, without a spreadsheet and without writing the chart by hand. This one is built for developers: alongside the chart it writes the code that draws it, ready to paste into a web page, a dashboard or an application. 2D charts use Chart.js, a small and widely used library; 3D charts use Plotly.js, because Chart.js does not draw in three dimensions.

Your data, the preview and the code stay in step because they come from one place. Every change to the table, the JSON or CSV, the chart type or a setting rebuilds a single chart configuration object. The preview draws that object, and the code panel prints the same object as JavaScript. Nothing in the code is a fixed template: labels, values, colours, titles, axes and options are all written from what you entered.

Everything runs in your browser. The data you type, paste or upload is not sent to our server and is not saved. Chart.js, and Plotly.js when you choose a 3D chart, are loaded from this site to draw the preview.

Supported chart types

Bar chart

Compares values across categories, such as sales per month. With one dataset, each bar can have its own colour.

Horizontal bar chart

The same comparison on its side, which leaves room for long category names.

Line chart

Shows how values change over an ordered series such as days or months, with one line per dataset.

Area chart

A line chart with the area under the line filled, emphasising volume over time.

Pie chart

Shows how a whole divides into parts. It uses one dataset, and each row becomes a slice.

Doughnut chart

A pie chart with a hole in the middle, whose size you can set.

Scatter chart

Plots numeric X/Y pairs to show a relationship, for example ad spend against revenue.

Radar chart

Compares several measures at once on spokes around a centre, one shape per dataset.

Stacked bar chart

Stacks datasets on top of each other, so each bar shows a total and the parts that make it up.

Grouped bar chart

Places datasets side by side within each category, for comparing them directly.

Combo chart

Mixes bars and lines in one chart, such as revenue as bars against a target line. Each dataset chooses its own type.

3D scatter chart

Plots points in three dimensions from three columns of numbers (X, Y and Z). Drag it to rotate and scroll to zoom.

3D line chart

Joins 3D points in row order, which suits a path, a flight or any trajectory through space.

3D surface chart

Draws a grid of values as a coloured surface, such as temperature across a plate or a response over two parameters.

How to create a chart

1. Enter your data in the Table tab: the first column holds the labels and each other column is a dataset. Or paste JSON or CSV, or upload a .csv file, in the other tabs.
2. Choose a chart type: bar, horizontal bar, line, area, pie, doughnut, scatter, radar, stacked bar, grouped bar, combo, or one of the 3D charts (scatter, line and surface).
3. Set the title, legend, axis titles, value range, colours and display options in Chart settings. Only the settings that apply to the chosen chart are shown.
4. Check the live preview, which redraws as you type. Drag a 3D chart to rotate it.
5. Copy the JavaScript or the complete HTML page, or download the chart as a PNG or JPG image.

How to generate JavaScript chart code

The code panel below the preview has two tabs. JavaScript holds only the chart code, for a page that already loads Chart.js and has a <canvas> with the id shown in the code (myChart unless you change it under Advanced settings). HTML + JavaScript holds a complete page: it loads Chart.js from the jsDelivr CDN, adds the canvas and its container, and runs the chart code, so you can save it as an .html file and open it. Select Copy Code to copy the tab you are viewing, or Download to save it as a file.

For example, a bar chart titled Monthly Sales with the months January to March and one dataset produces:

const ctx = document.getElementById('myChart');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [
            {
                label: 'Sales',
                data: [120, 180, 150],
                backgroundColor: ['#3b82f6', '#10b981', '#f59e0b']
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        aspectRatio: 1.5,
        plugins: {
            title: { display: true, text: 'Monthly Sales' },
            legend: { display: true, position: 'top' }
        },
        scales: {
            x: {
                title: { display: true, text: 'Month' },
                grid: { display: true }
            },
            y: {
                beginAtZero: true,
                title: { display: true, text: 'Sales (units)' },
                grid: { display: true }
            }
        }
    }
});

Change any value and the data array changes with it; switch to a horizontal bar and the code gains indexAxis: 'y'; turn on data labels and it includes the small plugin that draws them, because Chart.js has no built-in data labels. The 2D code targets Chart.js 4. For a 3D chart the code instead builds the data, layout and config objects for Plotly.js and calls Plotly.newPlot on a <div>, and the HTML version loads Plotly's 3D build. To feed a chart from your own API, keep the options and replace the labels and data arrays with values from the response. Tidy or inspect JSON data first with the JSON Formatter or JSON Validator, and turn JSON records into a spreadsheet-ready file with JSON to CSV.

When the chart will not draw

Please enter at least one data row to generate the chart.

The table has no rows, usually after Clear data. Select Add row and type a label and a value, paste JSON or CSV, or select Load example.

Values must be numbers. Not a number: row 3 of "Sales"

A value cell contains text, a currency symbol or a percent sign. Enter plain numbers such as 1250 or 1,250.5; leave a cell empty if you want a gap in the chart.

Scatter charts need numbers in the first column (the X values)

A scatter chart plots X/Y pairs, so the label column must hold numbers rather than names such as months. Put the X values in the first column, or choose a line chart for data over categories.

Two datasets are named "Sales". Give each dataset a unique name.

The legend and tooltips identify each dataset by its name, so two columns cannot share one. Rename one of them in the table header or under Datasets.

The JSON is not valid at line N, column M

The JSON tab accepts strict JSON only. Property names and strings need double quotes, and trailing commas and comments are not allowed. The JSON Formatter shows the exact problem.

3D charts need WebGL, which is turned off or unavailable in this browser

The 3D charts are drawn with WebGL. Turn on hardware acceleration in the browser settings, update the graphics driver, or use another browser. The generated code is unaffected and works wherever WebGL is available.

The generated code shows a blank area on my page

Chart.js must be loaded before the script runs, and the canvas id in the code must match the canvas on the page. When Maintain aspect ratio is off, the canvas's container also needs a height, as in the HTML version.

Developer use cases

• Dashboard development: prototype a KPI chart with real numbers, then paste the configuration into the dashboard's code.
• Admin panels: produce the Chart.js setup for an orders-per-day or users-per-month widget without looking up every option.
• Analytics and reporting: turn a CSV export into a chart image for a report, a ticket or a slide.
• Data visualization: compare bar, line, area and radar views of the same data before choosing one.
• Web applications: get a working HTML page to start from, then replace the data array with a call to your API.
• Scientific and engineering data: plot measurements in three dimensions or a grid of values as a 3D surface, with the Plotly.js code to embed it.
• Teaching and documentation: show how a Chart.js option changes the chart, with the matching code beside it.

Frequently asked questions