How to make a multiple line chart with series color determined by another property

Question

I'm currently building a angular project where i need to draw a line chart with multiple datasets.

• Angular 14
• dc.js 4.2.7

Each line should represent a mac address and the line color should be defined by each dataset property. So basically groupped by 2 diferent properties. The object to map datasets comes in this format :

{
  id: "string",
  datasets: [
    id: "string",
    data: [];
    color: "string";
  ]
}

Before i had to put the colors i followed some examples, joinned all data from datasets and made a series chart for the mac addresses

// generate charts
var chart_width = null,
  chart_height = null;
var chartObjet = dc.seriesChart("#chart");

    chartObjet.height(chart_height).width(chart_width)
  .margins({ top: 10, right: 10, bottom: 20, left: 40 })
  .chart(function(c) {
    return dc.lineChart(c)
            .renderDataPoints({ radius: 2, fillOpacity: 0.8, strokeOpacity: 0.1 });
  })
  .clipPadding(10)
  
  .dimension(chartDimension)
  .group(chartDimension.group())
  .seriesAccessor(function(d) {
    return d.key[1];
  })
  .keyAccessor(function(d) {
    return d.key[0];
  })
  .valueAccessor(function(d) {
    return +d.value;
  })
  .x(xScale)
  .xUnits(xUnits);
chartObjet.render();

But i could not find any example to also group it by color and after experimenting a bit with dc colors, i could never managed to make it work. Is this possible ?

Heres a fiddle with my currently chart: https://jsfiddle.net/TheAndre98/zexncpd5/41/