Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Move the client's charts to Chart.js

オープン
  • 何か問題がありますか？
#924 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@bracyw がすでに取り組んでいます。

2026年10月27日 から。

評価

この issue はまだ評価されていません。

説明

by: ai epic frontend
From idea

#865

Goal

Draw every chart in angular-client with Chart.js instead of ApexCharts. ApexCharts left MIT, version 7 adds a license key and a watermark, and its newer Angular wrappers need version 6 or later. Moving to Chart.js keeps the client on an MIT library that works with current Angular, and keeps the monitoring features people use today: hover values, zoom, legends, day markers and export.

Approach

Chart.js 4 through ng2-charts, its Angular wrapper, with chartjs-plugin-zoom for zoom and pan and chartjs-plugin-annotation for day lines. It comes from spike #877 (draft PR #887), and the decision with its measurements is in https://github.com/Northeastern-Electric-Racing/Argos/issues/865#issuecomment-6430776779.

Diagram
flowchart LR
  subgraph before["Before"]
    direction TB
    GP1["Graph page"] --> AX["ApexCharts 5 + ng-apexcharts"]
    SC1["Small charts: graph, double-line graph, pie chart"] --> AX
  end
  subgraph after["After"]
    direction TB
    GP2["Graph page"] --> CJ["Chart.js 4 + ng2-charts, zoom and annotation plugins"]
    SC2["Small charts: graph, double-line graph, pie chart"] --> CJ
  end
  before ~~~ after

Only angular-client changes. The car, Siren and scylla-server, and the data the client receives, stay as they are.

Out of scope
  • New chart features beyond today's; graph saving is #842 and its spikes.
  • Upgrading Angular; ng2-charts 10 supports the client's Angular 21.
  • Changing how telemetry reaches the client.
Requirements
  • Every chart in angular-client draws with Chart.js
  • ApexCharts and ng-apexcharts are no longer client dependencies
  • Charts keep today's hover values, zoom, legends, day markers and export
  • Live graphing stays smooth with several topics streaming
Context transfer
SUMMARY
Idea #865 tried seven libraries in spikes #872-#878 (PRs #882-#888) and chose Chart.js through ng2-charts. The graph page is already ported on branch 877-try-chartjs-for-the-clients-graph-page (PR #887); the small charts are not.

CONTEXT
- Versions on the spike branch: chart.js 4.5.1, ng2-charts 10.0.0, chartjs-plugin-zoom 2.2.0, chartjs-plugin-annotation 3.1.0.
- ng2-charts (Valor Software, MIT): about 450k weekly downloads, releases 9.0.0 Feb 2026, 10.0.0 Mar 2026, 11.0.0 Sep 2026. 10.x needs Angular 21+, 11.x needs Angular 22. The client is on Angular 21.2.
- ng2-charts only creates and destroys the chart, calls update() on input changes, passes plugins through, and runs outside the Angular zone; hooks come from Chart.js itself (about 30 plugin hooks, custom interaction and tooltip-position modes, external HTML tooltips).
- Memory macOS charges the tab and GPU processes, two 60 s runs, 5 topics live: Chart.js ~700 MB, uPlot ~706, webgl-plot ~724, dygraphs ~770, ECharts ~800, lightweight-charts ~830, Plotly ~1,250.
- npm weekly downloads: Chart.js 12.8M, uPlot 358k. GitHub stars: 67.8k vs 10.6k.
- ApexCharts on develop: apexcharts ^5.16.0 and ng-apexcharts 2.5.0 in angular-client/package.json.
- Not measured in the spikes: frame rate, and a long historical range near the 7-day cap.
主要言語
TypeScript
スター
5
フォーク
1
平均マージ
2日 13時間
マージ済み PR（30日）
48

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Northeastern-Electric-Racing/Argos のほかの issue

Northeastern-Electric-Racing/Argos の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。