Support for CSS Level 4 Color Syntax (e.g. oklch(), space-separated hsl(), etc)
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript
調査の方向性
まず、リンクされた CodePen でアニメーションの失敗を再現し、その後、アニメーションする色に対する Chart.js の色処理を追跡します。oklch()、lab()、color()、およびスペース区切りの hsl()/rgb() 構文について動作を比較し、説明されているアニメーションシナリオでこれらの形式が機能し、既存の単色処理を壊さないことを完了条件とします。
索引モデルが issue の本文から書いたものです。
説明
Feature Proposal
Description:
Chart.js currently doesn't have full support for modern CSS Level 4 color formats, like:
oklch(.623 .214 259.815)
color(display-p3 0.27 0.49 0.99)
hsl(216.89 100% 59.61% / 90%) (space-separated notation)
etc.
While these formats are increasingly supported across modern browsers and work fine within Chart.js when used directly as solid colors, they fail in some scenarios - for example, in animations:
animation: {
numbers: { duration: 0 },
colors: {
type: "color",
duration: 1000,
from: "transparent",
}
}
You can see the issue in action here: https://codepen.io/jwvqbbzv-the-looper/pen/RNWWzaG
Feature Request:
Please consider adding support for CSS Level 4 color formats, including oklch(), lab(), color(), and the updated space-separated hsl()/rgb() notation. Native browser support is already quite strong, and support in Chart.js would greatly improve flexibility and modern color handling.
Why it's important:
These formats are increasingly standard and used in modern CSS workflows.
They allow for perceptual color spaces (oklch, lab) and better control for accessibility and color contrast.
Currently, Chart.js users must work around limitations or avoid using animations with modern colors altogether.
Thank you!
Possible Implementation
No response
- 主要言語
- JavaScript
- スター
- 67.8k
- フォーク
- 12k
- 平均マージ
- 6時間 15分
- マージ済み PR（30日）
- 3
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドなし
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
chartjs/Chart.js のほかの issue
-
Numeric tick formatter gives repeated labels in scientific notation and with bounds: 'data'対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
linear axis: "reverse" breaks tick align 'inner'対応中かも @Fardin7798 が 1 日前に担当しました。 オープンtype: bug
難易度 2/5 1〜3時間 初心者へのやさしさ 77/100
メンテナーはふだん 1 日以内に返信
-
fill: 'stack': a dataset's whole fill disappears when its x differs from the line below by ≤ 1e-6 px (happens in animations)対応中かも @ump45nose が 37 日前に担当しました。 オープンtype: bug
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
Legend pointStyle: 'line' does not apply dataset borderDash pattern対応中かも @HuzaifaChaudary が 70 日前に担当しました。 オープンtype: bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
メンテナーはふだん 1 日以内に返信
chartjs/Chart.js の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
Fei2411/DeepSeek-Bot#1113 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
arfct/timezone.fyi#19 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
fastify/fastify-http-proxy#493 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
eliasstravik/herdr-projects#785 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
tensorflow/tfjs#8754 ·