Multiples Y axis with different colors

Posted by: lucas.gagneten on 6 May 2019, 6:17 am EST

    • Post Options:
    • Link

    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:

    https://jsfiddle.net/qvm31L4s/

  • 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:

    https://stackblitz.com/edit/angular-j9kae7

  • 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!!!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels