How to custom colors by label in pivot view?
Hi Jose,
We believe that your requirement is to customize the colors of specific labels and their corresponding series in the Pivot Chart. If so, this can be achieved using the pointRender and multiLevelLabelRender events.
- The pointRender event allows you to customize the series color based on the label. For instance, if the label is "Danger," the corresponding data point can be colored red.
- The multiLevelLabelRender event enables customization of the text color of axis labels. This ensures that the label text with "Danger" is also displayed in red.
In the provided code example, these events have been used to apply a specific color to both the series and its label(FY 2015) dynamically. Refer to the code example below for implementation:
Code Example:
|
ngOnInit(): void { this.chartSettings = { pointRender: this.observable.subscribe((args: any) => { // Customize the color based on the point's name if (args.point.x === 'FY 2015') { args.fill = '#F7786A'; // Red color for FY 2015 } }) as any, // Set the text color for the label multiLevelLabelRender: this.observable.subscribe((args: any): void => { if (args.text === 'FY 2015') { args.textStyle.color = '#F7786A'; // Apply red text color for FY 2015 } }) as any, } as ChartSettings; }
|
Output Screenshot:
Meanwhile, we have prepared a sample for your reference, which is available at the following link.
Sample: https://stackblitz.com/edit/angular-dpbx7ogp-gjyxgsvd?file=src%2Fapp.component.ts
However, if this solution does not fully meet your requirement, please provide additional details, such as where your series rendering, which chart type you are using, and which specific series you need to apply color to. This will help us provide a more suitable solution based on your needs.
Please feel free to reach out. We will be happy to assist you.
Regards,
Narmatha Saminathan.
Hi Jose,
We believe that your requirement is to apply specific colors to the chart legend and chart series (e.g., France: Blue, Germany: Orange). If so, we can achieve this by using the palettes property in the chartSeries, where you can assign specific colors to each series. Additionally, by using the loaded event, you can customize the legend labels to reflect the same colors as the corresponding series. Please refer to the code example below for more details on the implementation.
Code Example:
|
// Define an array of colors to be used in the chart series and legend labels public chartPalettes: string[] = ['#A7C7E7', '#FFD580', '#FF9999', '#9ACD32'];
ngOnInit(): void { this.chartSettings = { title: 'Sales Analysis', chartSeries: { type: 'Column', palettes: this.chartPalettes, // Assigns the defined color palette to the chart series }, // The loaded event ensures that legend labels reflect the same colors as the corresponding series loaded: this.observable.subscribe((args) => { // Select all legend text elements let legendTextCol: NodeListOf<HTMLElement> = document.querySelectorAll( '[id*="PivotView_chart_chart_legend_text_"]' ); // Loop through the legend elements and apply the corresponding color from the palettes array for (let i = 0; i < legendTextCol.length; i++) { legendTextCol[i].setAttribute('fill', this.chartPalettes[i]); // Set the fill color of the legend label } }) as any, } as ChartSettings; }
|
Output Screenshot:
Meanwhile, we have prepared a sample for your reference, which is available at the following link.
However, if this solution does not fully meet your requirements, kindly provide more details on what you mean by "label" and how you intend to apply the colors. This will help us investigate further and provide you with the necessary details as soon as possible.
Regards,
Narmatha Saminathan.
Hi Jose,
We believe that your requirement is to apply specific colors to both the chart series and the corresponding labels. If so, this can be achieved using the pointRender and multiLevelLabelRender events.
- The pointRender event allows you to customize the series color based on its index, ensuring that each data point is assigned a specific color.
- The multiLevelLabelRender event enables customization of the text color for multi-level labels, ensuring that the label color corresponds to the assigned series color.
In our code example, we have one field in the rows and no fields in the columns. This report settings results in a single-column series. And then we have applied the same color to both the labels and the chart series using the above mentioned events. Please refer the below code example for implementation.
Code Example:
|
// Define an array of colors to be used in the chart series and labels public pointColors: string[] = ['#A7C7E7', '#FFD580', '#FF9999', '#9ACD32']; ngOnInit(): void { this.chartSettings = { pointRender: this.observable.subscribe((args: any) => { // Applying colors to the series points based on their index args.fill = this.pointColors[args.point.index]; }) as any, multiLevelLabelRender: this.observable.subscribe((args: any): void => { // Applying colors to the multi-level labels based on their row index args.textStyle.color = this.pointColors[args.customAttributes.rowIndex - 1]; }) as any, } as ChartSettings; }
|
Output Screenshot:
Meanwhile, We prepared sample for your reference. You can find the sample at the following link.
Sample: https://stackblitz.com/edit/angular-dpbx7ogp-u8ybse9j?file=src%2Fapp.component.ts
If the above solution does not fully meet your requirements, please provide us with more details, such as a screenshot or a reference video, along with clarification on what you specifically mean by "labels". This will help us better understand your scenario and provide you with the most accurate solution at the earliest.
Regards,
Narmatha Saminathan.
