Chart mit CSS

[Sempervivum]

Das liest sich plausibel. Auf Anhieb fällt mir keine Möglichkeit ein, direkt auf die Definition im CSS zuzugreifen, wohl aber die Styles von konkreten Elementen. Versuche, ob Du mit
Window.getComputedStyle() - Web APIs | MDN
zum Ziel kommst.

 

[Sempervivum]

Sofern die Farben als CSS-Konstanten definiert sind, geht es noch ein wenig eleganter:
How to Get and Set CSS Variable Values with JavaScript

 

[Dragosius]

Leider sind meine JS-Kenntnisse da noch etwas schlecht.

So wie ich das lese, brauche ich Folgendes:

.setProperty('--my-variable-name', 'pink');

Wie kann ich es denn setzen, dass es für folgenden Code gesetzt wird?

backgroundColor: [
    'rgba(255, 159, 64, 0.2)'
],

Diese CSS-Konstanten habe ich, das stellt kein Problem dar.

 

[Sempervivum]

Wenn Du die CSS-Konstanten hast ist es ja perfekt. Dann kannst Du die Werte entspr. dem zweiten Link so auslesen:

const bgColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name');

und dann beim Chart verwenden:

backgroundColor: [
    bgColor
],

 

[Dragosius]

Vielen Dank.

Jetzt will ich dir aber mein Resultat auch nicht vorenthalten:

 

[Sempervivum]

Sieht doch super aus! Ist das jetzt was Du dir vorgestellt hast?

 

[Dragosius]

Ja soweit schon, außer dass bei zu vielen Einträgen einfach welche weg gelassen werden.
Darum habe ich es umgedreht, also dass es vom heutigen Tag in die Vergangenheit geht.

 

[Sempervivum]

Hm, da finde ich leider nichts, dass es eine Begrenzung gibt nur dies wo gesagt wird, dass es keine gibt:
is there a maximum number of data points it can graph? · Issue #2010 · chartjs/Chart.js
Allerdings ist der Thread schon ein paar Jahr alt.