Jump to content
JChartFX Community
  • 0

Styling issues


jayman18

Question

Hello,

 

I have two short questions which might be easy to solve but I got some struggle with it:

 

(1)

I want to change the color of a line chart with three lines.

The first line should be red:

chart.getSeries().getItem(0).setColor("#ff0000");

This _ALMOST_ works, however, the line color is not red, it is 192-0-0 (its a bit two dark for real red).

What am I doing wrong?

I tried setTemplate("LineBasic") on the gallery attributes

 

(2)

How can I set the background of a "chart area" to a "unicolor background color" white (no gradient). Furthermore I want to take influence on the border and the "round corners".

I dont want to use any motifs though.

 

I dont include any .css of you, for sure they have a good quality, but I need to set it programmatically.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

1) To change the line color of a line chart

 

Please use the Series.Border, e.g.

 

chart1.setGallery(cfx.Gallery.Lines);

chart1.getGalleryAttributes().setTemplate("LineBasic");
chart1.setDataSource([{"A":10, "B":20},{"A":14, "B":18},{"A":13, "B":16}]);
chart1.getSeries().getItem(0).getBorder().setColor("#FF0000");
 
2) There are 2 elements that contribute to the background of a chart, the back color of the chart and the border (some borders will add some effects)
 
In our default border, the border paints some effects on top of the background including some gradients, if you want a solid border and control over the round corners you would need something like this
 
var borderTemplate = '<DataTemplate xmlns:x="a" xmlns:sys="b">' +
                      '<DataTemplate.Resources>' +
                        '<DataTemplate x:Key="internalRect">' +
                          '<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}" />' +
                        '</DataTemplate>' +
                        '<DataTemplate x:Key="internal">' +
                          '<Line Stroke="{Binding Path=Stroke}" X1="{Binding Path=X1}" X2="{Binding Path=X2}" Y1="{Binding Path=Y1}" Y2="{Binding Path=Y2}"/>' +
                        '</DataTemplate>' +
                      '</DataTemplate.Resources>' +
                      '<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}">' +
                      '</Border>' +
        '</DataTemplate>';
 
    chart1.getBorder().setTemplate(borderTemplate);
 
Unfortunately we did not expose this as a "prebuilt" template in the same way as "LineBasic", we will do so in future builds.
 
If you want some roundness to the border, you can add CornerRadius="8" to the last <Border> tag.
 
To change the background color and border color you would use
 
   chart1.setBackColor("#E0E0E0");
   chart1.getBorder().setColor("#FF0000");
 
Hope this helps.
 
JuanC
Link to comment
Share on other sites

  • 0

Thank you, JuanC for your help.

the first issue is solved.

 

I think you got me wrong with the second issue - what I want is this:

 

Imagine I have a div

 

<div style="width:555px;background-color:#FF0000;" id="mypiechart"></div>

 

I want to create a chart in this div.

But I want the chart to have any background styling, nor a border, nor a gradient, just as it.

 

If such "transparency" is not possible, it would be also ok if the chart background is just simple unicolor red with NO border, NO gradient, etc.

image.png

See attachment below.

Link to comment
Share on other sites

  • 0

If you know you will only have 2 elements in your pie and do not care to color each slice indepently

 

chart1.setDataSource([8,20]);

chart1.setBorder(null);
chart1.setBackColor("#00FFFFFF");
chart1.setGallery(cfx.Gallery.Pie);
chart1.getLegendBox().setVisible(false);
 
chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' +
        '<Path Data="{Binding Path=Geometry}" Stroke="#00FF00" StrokeThickness="{Binding Path=StrokeThickness}"/>' +
      '</DataTemplate>');
 
If you do care about coloring each slice border with a different color
 
chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' +
        '<Path Data="{Binding Path=Geometry}" Stroke="{Binding Path=Stroke}" StrokeThickness="{Binding Path=StrokeThickness}"/>' +
      '</DataTemplate>');
 
var points = chart1.getPoints();
points.getItem(-1,0).getBorder().setColor("#000000");
points.getItem(-1,1).getBorder().setColor("#FFFFFF");
 
Hope this helps.
 
JuanC
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...