[CLOSED] CartesianChart Bars Colors

[aliabdulla]

Hello,

I want to change the colors of chart Bars, I have 3 columns:

- Red.
- Green.
- Yellow.

I tried this:

                        <ext:Panel
                            runat="server"
                            Header="false"
                            ColumnWidth="0.30">
                            <Items>
                                <ext:CartesianChart
                                    ID="EvalutionTypeChart"
                                    ClientIDMode="Static"
                                    Colors="#00ff00,#ff5d38,#fff881"
                                    PaddingSpec="20 0 0 0"
                                    MarginSpec="20 0 0 0"
                                    Height="260"
                                    Width="350"
                                    runat="server">
                                    <Store>
                                        <ext:Store
                                            ID="EvalutionTypeChartStore"
                                            ClientIDMode="Static"
                                            runat="server"
                                            AutoDataBind="true">
                                            <Model>
                                                <ext:Model runat="server" ClientIDMode="Static" ID="EvalutionTypeChartStoreModel">
                                                    <Fields>
                                                        <ext:ModelField Name="EvalutionTypeTitle" />
                                                        <ext:ModelField Name="DoCount" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis
                                            Position="Left"                                         
                                            Fields="DoCount"
                                            Grid="true"
                                            Title="المجموع"
                                            Minimum="0">
                                            <Renderer Handler="return Ext.util.Format.number(label, '0,0');" />
                                        </ext:NumericAxis>

                                        <ext:CategoryAxis  Position="Bottom" Fields="EvalutionTypeTitle" Title="أنواع التقييم">
                                            <Label RotationDegrees="0" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <Series>
                                        <ext:BarSeries
                                            Highlight="true"
                                            XField="EvalutionTypeTitle"
                                            Colors="#00ff00, #ff5d38, #fff881"
                                            YField="DoCount">
                                            <Tooltip runat="server" TrackMouse="true">
                                                <Renderer Handler="toolTip.setTitle(record.get('EvalutionTypeTitle') + ': ' + record.get('DoCount'));" />
                                            </Tooltip>
                                            <Label
                                                Display="InsideEnd"
                                                Color="#00ff00"
                                                Field="DoCount"
                                                Orientation="Horizontal"                                                
                                                TextAlign="Center"
                                                RotationDegrees="45">
                                                <Renderer Handler="return Ext.util.Format.number(text, '0');" />
                                            </Label>
                                        </ext:BarSeries>
                                    </Series>
                                </ext:CartesianChart>
                            </Items>
                        </ext:Panel>

I used

Colors="#00ff00,#ff5d38,#fff881"

every where, with no luck to have correct color.

Kindly, advice.

[fabricio.murta]

Hello @aliabdulla!

I see what you want. But I don't think I'd be able to run that example, so I'm just testing this in our simple column chart example.

The Colors property sets color for each of the bar series that is, different data it shows. For sequential data of the same series, you'd need to fill the color through the series' renderer.

Considering you would only have one series on your charts, ever, you can keep the "colors" property just by convenience and have those colors be cycled over data entries in the chart (notice if you have more than 3 data entries in the series it will repeat the colors over).

In other words, add this code to your chart's ext:BarSeries block:

<Renderer Handler="var colors = this.getColors(); return {fill : colors[index % colors.length]};" />

The above code will pull the Colors= property off your [b]ext:BarSeries[b] tag. If you want to get the one you set in the ext:CartesianChart, then you want this.getChart().colors instead:

<Renderer Handler="var colors = this.getChart().colors; return {fill : colors[index % colors.length]};" />

This is the easier solution for your case.

But the "correct" one (to use Colors the way they are intended to) is to specify your data as three series, say DoCount1, DoCount2, DoCount3, and then just specify them in your series' YField argument as YField="DoCount1, DoCount2, DoCount3". So it would require a little furhter logic work on your code to get the data right.

You would also need to adjust the label to be applied to the three "series", and also adjust the tooltip to show the correct information probably having a static map of the field names to their "friendly" names! All on all, your series code block would look more or less like this:

<ext:BarSeries
    Highlight="true"
    XField="EvalutionTypeTitle"
    YField="DoCount1, DoCount2, DoCount3">
    <Tooltip runat="server" TrackMouse="true">
        <%-- You may want to map the field name to its friendly string somewhere like a js variable --%>
        <Renderer Handler="var fieldName = context.sprite.getField(); toolTip.setTitle(fieldName + ': ' + record.get(fieldName));" />
    </Tooltip>
    <Label
        Display="InsideEnd"
        Color="#00ff00"
        Field="DoCount1, DoCount2, DoCount3"
        Orientation="Horizontal"                                                
        TextAlign="Center"
        RotationDegrees="45">
        <Renderer Handler="return Ext.util.Format.number(text, '0');" />
    </Label>
</ext:BarSeries>

And of course you should keep the Colors= defined in your sample block's line 9, as it will be used to determine the colors of the bars.

Hope this helps!

[fabricio.murta]

Oh! And here's the example I linked above with the changes applied. Notice there will be several times the same color pattern because every data series has 12 values corresponding to the months of a year in that hypothetical data.



If this is still unclear what should be done, we'd need you to provide a proper, runnable test case, so we can tell you exactly what to change and where. We simply cannot reproduce the chart you shared a screenshot simply because you didn't provide a sample with mock data, etc.

As a new user in Ext.NET forums, you should really consider taking some time to review our forum threads posting guidelines, as they really help us provide you the best support! Here they are:

- Tips for creating simplified code samples
- More Information Required
- Forum Guidelines

As another piece of advice, using an example off the Examples Explorer might be the best choice for a quick test case (and if the mock data used is the same off the example, you can just tell the data is the same and we'll use it).

Hope this helps!

[aliabdulla]

Dear @fabricio.murta,

Thanks for your valuable efforts.

The solution worked for me.

I will consider guideline in the coming tickets.

Best regards,

[fabricio.murta]

Thanks for the feedback, and glad it worked!