Unable to set line chart series colors

[timopu]

Hi,

I'm unable to set the color of series using the API when JChartFX's stylesheets are included.

Simple example: if I modify the presenter.js of the example "JS_Lines_and_Stripes_Charts.zip" by adding calls to the setColor method of both series and series border (see below), the palette defaults override my API calls (so nothing happens) until I comment out the line

<link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>

 from index.html. After the removal the API calls work ok. The same behavior is seen in our app where JChartFX is embedded in. What am I doing wrong?

 

function LineChartWithMarkers(chart1)
{
// test chart series color setting
chart1.getSeries().getItem(0).setColor("#000000");
chart1.getSeries().getItem(0).getBorder().setColor("#000000");
chart1.getSeries().getItem(1).setColor("#BB0000");
chart1.getSeries().getItem(1).getBorder().setColor("#BB0000");

chart1.getSeries().getItem(2).setColor("#00CC00");
chart1.getSeries().getItem(2).getBorder().setColor("#00CC00");

	// RELEVANT CODE
chart1.setGallery(cfx.Gallery.Lines);
// END RELEVANT CODE
PopulateCarProduction(chart1);
var titles = chart1.getTitles();
var title = new cfx.TitleDockable();
title.setText("Vehicles Production by Month");
titles.add(title);
}

 

 

[JuanC]

You are doing nothing wrong, this is by design, when you use our CSS it means colors (and fonts, and line widths) are controlled through CSS instead of API, you have 3 options

1) Do not include our palette and attributes CSS, this is recommended if you will need to control several colors "dynamically"

2) Make a copy of the used CSS and change it as needed, e.g.

.jchartfx .Attribute0 {
    fill: #D0C5E3;
    stroke: #D0C5E3;
}

Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), for example, axis sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index.

3) Most objects expose a setTag method that allows you to customize the generated class

Regards,

JuanC

[timopu]

Hi JuanC,

all right, this makes sense, thanks! I opted for a mechanism in which I create partial stylesheets dynamically and use the setTag method to override palette (in this way I can allow some of the colors to be changed by the user in the UI and at the same time allow the defaults from the palette to be used).

Btw, is there an easy way to update the series colors in the overlay user interface? Your html for it looks like this

<ul class="options second-level"><li><i class="jchartfx-icon-block" style="background-color:#57acda"></i><a class="process">Series 1</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#93e24e"></i><a class="process">Series 2</a><a class="next jchartfx-icon-arrow-right"></a></li><li><i class="jchartfx-icon-block" style="background-color:#f26c5b"></i><a class="process">Series 3</a><a class="next jchartfx-icon-arrow-right"></a></li></ul>

Of course I can set these using JS, but a bit of pain because there are no class / id specifications and the color is set in style attribute.

br,

Timo

[JuanC]

I am guessing you are talking about the user interface when you select the Series menu. This is created dynamically, we do not use classes in this code but we try to get the color for AttributeX.

I noticed we do not try to use the series tag so that could explain a discrepancy between the color in the menu and the series. This has been fixed and the fix will be included in our next drop.

Regards,

JuanC