[Solved] How can I create an Angular LineChart where each point on the chart has a different color

[BIC]

How can I create an Angular LineChart where each point on the chart has a different color, as shown in the attached image?

Thanks

[Hetali]

Hello BIC,

In order to have a different color for each point on the Kendo UI Line Chart, add the color key-value pair in the data object. For example:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item
      type="line"
      [data]="data"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

public data = [
  { value: 123, color: 'red' }, 
  { value: 276, color: 'yellow' }, 
  { value: 310, color: 'green' },  
  { value: 212, color: 'blue' },  
  { value: 240, color: 'pink' },  
  { value: 156, color: 'gray' },  
  { value: 98, color: 'black' }, 
];

Output:

Additionally, to fill the markers, use the visual property as seen below:

<kendo-chart-series-item
  [markers]="{ size: 12, visual: markerVisual }"
>
</kendo-chart-series-item>

public markerVisual = (e: MarkersVisualArgs): Element => {
  const visual = e.createVisual();
  visual.options.set('fill', { color: visual.options['stroke'].color });
    
  const group = new Group();
  group.append(visual);
    
  return visual;
}

Output:

In this StackBlitz example, I have demonstrated the above mentioned code.

Please let me know if this helps or if I can further assist you.

Regards,
Hetali
Progress Telerik