Posted 6 May 2019, 6:17 am EST
Hello.
I have a Linear FlexChart with multiples Y axis.
I want to change the color of the Y axis and/or labels with the corresponding color of the trend line.
How can I do that?
Thanks.
Forums Home / Wijmo / General Discussion
Posted by: lucas.gagneten on 6 May 2019, 6:17 am EST
Posted 6 May 2019, 6:17 am EST
Hello.
I have a Linear FlexChart with multiples Y axis.
I want to change the color of the Y axis and/or labels with the corresponding color of the trend line.
How can I do that?
Thanks.
Posted 6 May 2019, 7:28 pm EST
Hello,
In order to change the color of labels, you could use the itemFormatter property of Axis class. Please refer to the sample below:
Posted 7 May 2019, 7:14 am EST
Thank you.
How should I format the color from the html if I’m using a code for the Axis as the following?:
<wj-flex-chart-axis [wjProperty]="'axisY'"
[position]="item.axisPosition"
[min]="item.axisMinimum"
[max]="item.axisMaximum"
[axisLine]="true"
[majorGrid]="this.chartSeriesItems.length === 1"
[minorGrid]="false"
[title]="item.axisTitle">
</wj-flex-chart-axis>
Posted 7 May 2019, 7:27 pm EST
Hi,
You may assign the fomatter function to the itemFormatter property of the wj-flex-chart-axis. Please refer to the following code snippet and the sample demonstrating the same:
<wj-flex-chart [itemsSource]="data"
[bindingX]="'country'">
<wj-flex-chart-axis #axis
[itemFormatter]="axisFormatter"
[wjProperty]="'axisY'"
[axisLine]="true"
[title]="'title'">
</wj-flex-chart-axis>
<wj-flex-chart-series [name]="'Sales'" [binding]="'sales'"></wj-flex-chart-series>
</wj-flex-chart>
// in ts file
axisFormatter(engine, label){
engine.textFill = 'darkred';
label.cls = null;
return label;
}
https://stackblitz.com/edit/angular-vqezkx?file=app%2Fapp.component.ts
~Sharad
Posted 9 May 2019, 10:05 pm EST
Thank you sharad.tomer. It woks very well. But I still need extra help.
How can I modify this code to use different colors for different Y axis. Y have up to 6 Y axis, and they appears when I add a new trend line.
Posted 13 May 2019, 12:03 am EST
Hello,
You could use the hostElement property of Axis class to get the host element of Y-Axis and you can apply the color accordingly. Please refer to the sample below:
Posted 13 May 2019, 11:53 am EST
Thank you abhishek.dutta. Your mprovement with the color of the Y-axis line is excellent and I will use it.
But my doubt is still pending.
Suppose we have the example at https://stackblitz.com/edit/angular-j9kae7.
But, instead of 1 Y-axis, I have 3 Y-axes: one for each variable “Sales, Expenses and Downloads”. And I want to use for the Y-axes the color of the variables in the chart, that is: Blue–>Sales, Orange–>Expenses and Green–>Download.
How can I use different colors for different Y-axes? And, how could I use in the Y-axes the same colors of the variables in the chart?
Posted 13 May 2019, 6:19 pm EST
Hi,
The other Y-Axis can also be coloured in the same way using hostElement property and then selecting the axis line. Please refer to the sample below demonstrating the same:
https://stackblitz.com/edit/angular-t7tmv9?file=app/app.component.ts
Posted 17 May 2019, 7:00 am EST
Many Thanks!!!