Jump to content
JChartFX Community
  • 0

Styling issues





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



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

The first line should be red:


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



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.setDataSource([{"A":10, "B":20},{"A":14, "B":18},{"A":13, "B":16}]);
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>' +
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
Hope this helps.
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.


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.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' +
        '<Path Data="{Binding Path=Geometry}" Stroke="#00FF00" StrokeThickness="{Binding Path=StrokeThickness}"/>' +
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}"/>' +
var points = chart1.getPoints();
Hope this helps.
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.

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.

  • Create New...