# Input Data Structures for Charts > This guide describes expected structures of the input data for charts, and how are they transformed into the data series for individual chart types. - Skill: `tools-only/input-data-structures-for-charts` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add tools-only/input-data-structures-for-charts` - Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/input-data-structures-for-charts/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tools-only (https://skillmd.com/u/tools-only) - Updated: 2026-09-29 - Page: https://skillmd.com/skills/tools-only/input-data-structures-for-charts --- # Input Data Structures for Charts This guide describes expected [structures of the input data](./structure.md) for charts, and how are they transformed into the [*data series*](../../spec/component.md#chart) for individual chart types. All charts are based on the [`Array of objects` input data type](./structure.md#array-of-objects-input-data). ## Pie and Donut charts Pie charts are good for showing proportions, while Donut charts for showing proportions with a central metric. But they are the same from the *data series* point of view - they expect one *data series*, where data point's `x` contains category name, and `y` contains number value for that category. LLM can decide to obtain chart data from the input data in one of these ways. ### Category frequency counted from one field Every object in the input data array represents entity falling into one or more categories named in one field. LLM selects this one field from the object in the input data array. Field name generated by the LLM becomes *data series* name. All the values of this field are collected from the whole array, then they are interpreted as category names, and occurrences are counted to be visualized. Example of the input data: ```json { "movies": [ {"genres": ["Action","Sci-fi"], ...}, {"genres": "Comedy", ...}, {"genres": "Crime", ...}, {"genres": "Comedy", ...}, {"genres": "Sci-fi", ...} ] } ``` Field value can be either simple value, or array of simple values. Array is flattened into multiple individual categories. The field can be also `null`, it is skipped and doesn't appear in the data series. Example of the chart UI component configuration to be visualized from the data above for `genres` field: ```json { "component": "chart-donut", "title": "Movie Genres", "data": [ { "name": "Genres", "data": [ {"x": "Action", "y": 1}, {"x": "Comedy", "y": 2}, {"x": "Sci-fi", "y": 2}, {"x": "Crime", "y": 2} ] } ] } ``` ### Category data from two fields !!!Warning This processing type is not implemented yet, we are working on it! Every object in the input data array represents one category, and contains fields with its name and visualized metric, but can contain others also. LLM selects two fields from the object in the input data array. First represents category name, second number value associated to that category to be visualized. Example of the input data: ```json { "genres": [ {"name": "Action", "numOfMovies": 1, ...}, {"name": "Comedy", "numOfMovies": 2, ...}, {"name": "Sci-fi", "numOfMovies": 2, ...}, {"name": "Crime", "numOfMovies": 1, ...} ] } ``` Chart UI component configuration is the same as above if LLM selected `name` and `numOfMovies` fields. ## Bar chart Bar charts are good for comparing more metrics across categories. But it can also be used to visualize single metric. Every object in the input data array represents one category, and contains fields with its name and metrics, but there can be other fields here also. LLM selects two or more fields from the object in the input data array, value of the first field represents category name (`x` shared by all the *data series*), each subsequent field represents one metric (`y` in own *data series*). Field name generated by the LLM for these other fields becomes *data series* name. Value type of these other fields in the input data can be either single `int`/`float`, array of `int`/`float`s (only first value is used), or `string` convertible to `int`/`float`. Value not matching these rules is omitted from the *data series*. Example of the input data: ```json { "sales_by_genre": [ {"name": "Action", "numOfMovies": 1, "numOfBooks": 5, ...}, {"name": "Comedy", "numOfMovies": 2, "numOfBooks": 2, ...}, {"name": "Sci-fi", "numOfMovies": 2, "numOfBooks": 3, ...}, {"name": "Crime", "numOfMovies": 1, "numOfBooks": 1, ...} ] } ``` Example of the Bar chart UI component configuration to be visualized from the data above, if LLM selects `name`, `numOfMovies` and `numOfBooks` fields: ```json { "component": "chart-bar", "title": "Sales by Genre", "x_axis_label": "Genre", "data": [ { "name": "Movies", "data": [ {"x": "Action", "y": 1}, {"x": "Comedy", "y": 2}, {"x": "Sci-fi", "y": 2}, {"x": "Crime", "y": 2} ] }, { "name": "Books", "data": [ {"x": "Action", "y": 5}, {"x": "Comedy", "y": 2}, {"x": "Sci-fi", "y": 3}, {"x": "Crime", "y": 1} ] } ] } ``` ## Mirrored Bar chart Mirrored bar charts are good for comparing two metrics side-by-side. Processing is the same as in case of the [Bar chart](#bar-chart), LLM selects exactly three fields from the object in the input data array to get two *data series* representing metrics for the comparison. ## Line chart Line charts show trends over time. Input data can be provided in two shapes: ### Standard data For this shape, every object in the input data array represents data for one point in time. LLM selects two or more fields from the object, rest of the processing is the same as in case of the [Bar chart](#bar-chart) to transform data into *data series*. Only `x` axis values do not represent categories, but points in time. Example of the input data: ```json { "data": [ {"month": "Jan", "sales": 100, "profit": 20, "expenses": 80, "note": "lorem ipsum", ...}, {"month": "Feb", "sales": 150, "profit": 35, "expenses": 115, "note": "lorem ipsum", ...}, {"month": "Mar", "sales": 120, "profit": 25, "expenses": 95, "note": "lorem ipsum", ...} ] } ``` Example of the Line chart UI component configuration to be visualized from the data above, if LLM selects `month`, `sales`, `profit` and `expenses` fields: ```json { "component": "chart-line", "title": "Business Over Time", "x_axis_label": "Month", "data": [ { "name": "Sales", "data": [ {"x": "Jan", "y": 100}, {"x": "Feb", "y": 150}, {"x": "Mar", "y": 120} ] }, { "name": "Profit", "data": [ {"x": "Jan", "y": 20}, {"x": "Feb", "y": 35}, {"x": "Mar", "y": 25} ] }, { "name": "Expenses", "data": [ {"x": "Jan", "y": 80}, {"x": "Feb", "y": 115}, {"x": "Mar", "y": 95} ] } ] } ``` ### Series oriented data Input data array is expected to contain one object for each *data series*, which contains one simple field with series name, and then field with another array containing objects with two fields for series `x` and `y` values. So LLM selects exactly three fields from the object in the input data array for this kind of chart. Note that `x` data in each series should be the same to get a good visualization. Example of the input data for this processing: ```json { "movies": [ { "title": "Movie A", "weeklyData": [ {"week": "W1", "revenue": 100, "note": "lorem ipsum", ...}, {"week": "W2", "revenue": 150, "note": "lorem ipsum", ...} ] }, { "title": "Movie B", "weeklyData": [ {"week": "W1", "revenue": 80, "note": "lorem ipsum", ...}, {"week": "W2", "revenue": 120, "note": "lorem ipsum", ...} ] } ] } ``` Example of the Line chart UI component configuration to be visualized from the data above: ```json { "component": "chart-line", "title": "Movies Weekly Revenue", "x_axis_label": "Week", "data": [ { "name": "Movie A", "data": [ {"x": "W1", "y": 100}, {"x": "W2", "y": 150} ] }, { "name": "Movie B", "data": [ {"x": "W1", "y": 80}, {"x": "W2", "y": 120} ] } ] } ```