Not possible to set label colors and offset per series

[ql_maxg]

This is frustrating, please fix ASAP

 

http://jsfiddle.net/t8ufarc3/17/

 

---------------

 

var jcharfx1 = null;

            var jcharfx1_isinit = false;    

           var loadchart1 = function() {                       

        

            jcharfx1 = new cfx.Chart();

              

 

             var  data = [{'Date':'2015-01', 'First Yield':86.98,'Quantity':2442}, {'Date':'2015-02', 'First Yield':90.18,'Quantity':1823}, {'Date':'2015-03', 'First Yield':91.81,'Quantity':1062}, {'Date':'2015-04', 'First Yield':92.06,'Quantity':2229}, {'Date':'2015-05', 'First Yield':63.38,'Quantity':1117}, {'Date':'2015-06', 'First Yield':82.32,'Quantity':1420}, {'Date':'2015-07', 'First Yield':86.34,'Quantity':2701}, {'Date':'2015-08', 'First Yield':83.56,'Quantity':1040}, {'Date':'2015-09', 'First Yield':75.71,'Quantity':3491}, {'Date':'2015-10', 'First Yield':63.08,'Quantity':4049}, {'Date':'2015-11', 'First Yield':85.1,'Quantity':4631}, {'Date':'2015-12', 'First Yield':86.5,'Quantity':2044}, ];

             

            jcharfx1.setDataSource(data);

 

                

          

             

             

             jcharfx1_isinit = true;             

                jcharfx1.setBorder(null);

                jcharfx1.setBackColor("#333740");

                jcharfx1.getAxisX().setTextColor("#f4f4f4");

                jcharfx1.getAxisY().setTextColor("#f4f4f4");

                jcharfx1.getAxisY2().setTextColor("#f4f4f4");

                jcharfx1.getAxisY().getGrids().getMajor().setColor("#666666");

                jcharfx1.getLegendBox().setTextColor("#f4f4f4");

                

                jcharfx1.setPlotAreaColor("#333740");

jcharfx1.getToolTips().setEnabled(true);

jcharfx1.getLegendBox().setDock(cfx.DockArea.Bottom);

                jcharfx1.getLegendBox().setVisible(false);

                jcharfx1.getMenu().setVisible(false);

                 jcharfx1.getAxisY().getTitle().setText("Quantity"); jcharfx1.getAxisY().getTitle().setTextColor("#f4f4f4"); jcharfx1.getAxisX().getTitle().setText("Timeline"); jcharfx1.getAxisX().getTitle().setTextColor("#f4f4f4"); var points = jcharfx1.getPoints(); points.getItem(-1, 11).setColor("#0080ff"); points.getItem(-1, 11).getBorder().setColor("#00b0ff"); points.getItem(-1, 11).getBorder().setWidth(3);   

               

               

               

             

             

                

                 var seriesItem =  jcharfx1.getSeries().getItem(0); if(typeof seriesItem != "undefined"){  seriesItem.setMarkerShape(cfx.MarkerShape.Circle); seriesItem.setMarkerSize(6); seriesItem.getPointLabels().setVisible(true); seriesItem.getPointLabels().setTextColor("#f4f4f4");  seriesItem.setAxisY(jcharfx1.getAxisY2()); jcharfx1.getAxisY2().getGrids().getMajor().setVisible(false); seriesItem.getAxisY().getDataFormat().setDecimals(2); jcharfx1.getAxisY2().getTitle().setText("First Yield (%)"); jcharfx1.getAxisY2().getTitle().setTextColor("#f4f4f4"); seriesItem.setGallery(cfx.Gallery.Lines);  seriesItem.setColor("#9e53a0"); seriesItem.getPointLabels().setFormat(" %v %%"); seriesItem.getPointLabels().setOffset("0,0"); var line = seriesItem.getGalleryAttributes(); line.setTemplate("LineBasic"); seriesItem.getAxisY().getDataFormat().setDecimals(2); }  

             

             var seriesItem2 =  jcharfx1.getSeries().getItem(1); if(typeof seriesItem2 != "undefined"){  seriesItem2.setMarkerShape(cfx.MarkerShape.None); seriesItem2.getPointLabels().setVisible(true); seriesItem2.getPointLabels().setTextColor("#f43333");  seriesItem2.setGallery(cfx.Gallery.Bar);  seriesItem2.setColor("#5ed7dd"); seriesItem2.getPointLabels().setOffset("0,-25"); var bar = seriesItem2.getGalleryAttributes(); bar.setTemplate("BarBasic"); seriesItem2.getAxisY().getDataFormat().setDecimals(0); } 

             

             

               jcharfx1.create($("#jchartfx_ChartDiv2")[0]);                  

 

 

                                  

            

 

            };

            $(function () { loadchart1();  });

 

 

 

[JuanC]

The bug only occurs when you set per-point attributes, it should be fixed on our next build.

 

Regards,

 

JuanC

[ql_maxg]

Juan,

how do I set color and labels offset for one series ?

[JuanC]

Your code is correct, there is a bug in jChartFX where if you set per-point attributes, e.g. chart1.getPoints().getItem(...) then the per-series label attributes are not properly honored for some series.

 

If you comment the 3 or 4 lines of code that set per-point attributes (around line 30 in jsfiddle) you will see the per-series labels attributes are processed correctly.

 

Obviously you are setting per-point attributes because you need them so you will have to wait for the next build that will fix this issue.

 

JuanC

[ql_maxg]

Juan,

how it will be released?

[JuanC]

It will be released in our next public build, it will likely be labeled 7.5 as it includes several changes including improvements in pie/doughnut labels and new APIs in areas such as annotations, titles, and others.

 

JuanC

[ql_maxg]

Do you have any ETA ?

[JuanC]

We have uploaded a new pre-release version that should fix this issue.

 

JuanC

[ql_maxg]

confirmed  as fixed.

[ql_maxg]

There is another problem with latest version.

If I have only one label - not possible to change color labels of a single series.