chartjs-axes

Configure and customize axes and scales for Chart.js v4.5.1 visualizations.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/sjnims/chartjs-expert --skill chartjs-axes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chartjs-axes
Source: https://github.com/sjnims/chartjs-expert/tree/main/skills/chartjs-axes
Command: npx skills add https://github.com/sjnims/chartjs-expert --skill chartjs-axes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users configure and customize axes and scales for their Chart.js visualizations, ensuring data is presented clearly and accurately.

Core Features & Use Cases

  • Axis Types: Supports category, linear, logarithmic, time, and radial scales.
  • Configuration: Detailed guidance on setting axis types, positions, titles, ticks, and grid lines.
  • Advanced Features: Covers dual axes, stacked axes, and scriptable options for dynamic styling.
  • Use Case: You need to create a chart with both revenue (in dollars) and units sold on different Y-axes to visualize sales performance effectively.

Quick Start

Configure a Chart.js chart to display a dual Y-axis with revenue on the left and units sold on the right.

Frequently Asked Questions about chartjs-axes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure dual Y-axes in Chart.js to plot revenue and units sold on the same chart?

To configure dual Y-axes in Chart.js, you assign multiple scale objects to the scales configuration property and map each dataset to its respective Y-axis using the yAxisID attribute. This allows you to plot revenue and units sold on the same chart accurately.

What types of scales does Chart.js support for data visualization?

Chart.js supports Cartesian scales like category, linear, logarithmic, and time scales, along with radial scales. These scale types allow you to accurately map various data formats onto the x, y, or r axes of your visualizations.

Can I customize grid lines and tick formatting on a Chart.js linear axis?

Yes, you can customize grid lines and tick formatting on a Chart.js linear axis. The configuration object provides specific properties for modifying axis titles, tick display logic, grid line styling, and border visibility.

What is the best way to format time series data on the x-axis in Chart.js?

The best way to format time series data on the x-axis in Chart.js is to set the axis type to time within the scales configuration. This ensures the scale correctly interprets and plots chronological data points.

Does Chart.js support stacked axes for visualizing cumulative data?

Yes, Chart.js supports stacked axes for visualizing cumulative data. You can enable stacked axes by configuring the specific scale objects to stack datasets, which allows you to visualize parts of a whole.

How do scriptable options work for dynamic axis styling in Chart.js?

Scriptable options in Chart.js enable dynamic axis styling by allowing you to provide functions that resolve configuration values at runtime. This lets you programmatically adjust tick formatting and grid lines based on data context.