Hi Marc,
Greetings from Syncfusion.
Query #1: How to customize the legend color text for each of them?
We have analysed your query. We can attain your requirement using textStyle object property of legend. Using this property we can change the color of the legend text commonly. Please find below code snippet,
Code Snippet:
public legendSettings: Object = {
visible: true, position: 'Top',
textStyle:{ color:'white' },
}; |
Query #2: How to make them align in one row?
Based on available size width and height the legends are placed in single or multiple row. If you want to show legend in one row then you will increase width of the chart or decrease the legendSettings height. When we decrease legend height then the paging is automatically enabled. We have prepared a sample based on your requirement. Please find below sample and code snippet,
Code Snippet:
public legendSettings: Object = {
visible: true, position: 'Top',
textStyle:{ color:'white' },
height: '50'
}; |
Screenshot:
Hope this helps.
Regards,
Baby.