[CLOSED] Custom colors for individual bars in bar chart

  1. #1

    [CLOSED] Custom colors for individual bars in bar chart

    Hi Sir,

    I have an requirement in barchart(Ext.Net Version4 WebApp).

    Here is my requirement : I have "ok","pending","Failed","inProgress","declined " scenerios.

    If OK --Green color
    Pending - Orange
    Failed -Red
    In progress- Blue
    Declined - Yellow

    How to apply custom colors mentioned above.Individual bar in barcharts.

    Thank you,
    Last edited by fabricio.murta; May 17, 2019 at 9:32 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello Vamsi!

    Simply use a renderer and paint it according to the value. Much like this example:
    - Charts - Bar - Renderer

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for reply.. I see 'Data1' is hard coded value in example..but in my case more than 2 values that too dynamic values..

    I have model with dynamic values.(more than 4 values)..

    Let me know how to handle based on color code coming from database and attach to particular bar based on condition... If see 'OK' then attach color and I see different value then attach some other color code.
  4. #4
    Hello @vamsi!

    As far as I understand, chart bar colors come from the theme predefined with the component, not database. If you mean there's a field with a color code coming from the model, you can just fetch it from record.get('myColorCodeField') during the above example's color code, then return the color the same way as done with the example.

    In the example, it just fetches a code given the result of (record.get('Data1') >> 0) % 5, which is a number between 0 and 4, and uses it to fetch the corresponding index in the array of colors defined there. You can use any logic with the record you feel like, even use the own record color code as the color of the bar.

    Maybe we could better help you if you could provide a test case illustrating your scenario; with a simplified/base sample of how your data look like (so we know what you expect to use in order to determine the output of the chart bar); say, if data value is X, then color is Y, if data value is between A and B, then color is Z, and so on.

    I believe that way we could better follow your needs, but I am pretty confident the example linked in our last post takes you to the point you could do almost anything with the available bar data in order to output it whatever way you wanted it to.

    Hope this somehow clarifies and ultimately helps; if not, we're looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Here is my Code Im trying to achieve this.

    function barRenderer(sprite, config, rendererData, index) {
        var fld = document.getElementById('EventCharts_hdnFields').value;     // fld= "ok","Cancel","Failed","Progress"
        var colors = document.getElementById('EventCharts_hdncolorItems').value;//Color= "green","orange","Red","Blue"
        var arrcolors = colors.split(',');
        var arrfld = fld.split(',');
        for (i = 0; i < arrcolors.length; i++) {
            var store = rendererData.store,
            storeItems = store.getData().items,
            record = storeItems[index],
            ieldValue = Math.random() * 20 + 10,
            value = (record.get(arrcolors[i]) >> 0) % 5,
            value = i;
            color = [arrcolors[i]][value];
            fill: color
    Let me know some where wrong in above code.
    Last edited by fabricio.murta; Feb 21, 2019 at 8:00 PM. Reason: Wrap code in [code][/code] tags.
  6. #6

    What we are trying to do is change the colors of each segment in a STACKED bar chart to be different than the default colors you have provided without changing the order of the data. In other words we don't want data1 to be Green and data2 to be blue and data3 to be Red etc. We want to change these colors including the color of the circles in the legends to be different.

    For Instance we want the colors to match those shown in the legends of the attached chart. I.E., we want Held to be ORANGE,Pending to be LIGHT ORANGE,INProcess to be BLUE,OK to be GREEN and Failed to be RED without changing the order of the data.

    Click image for larger version. 

Name:	chart (6).png 
Views:	17 
Size:	35.0 KB 
ID:	25242

    Thank you,
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.jpg 
Views:	15 
Size:	92.0 KB 
ID:	25241  
  7. #7
    Hello, @vamsi!

    Have you tried browsing the chart examples to see whether you could find something that does exactly what you need?

    If I understand well, you don't need a custom color depending on the bar's value, right? You just want to specify the color you want to each stacked column of the chart, isn't it?

    It seems the renderer is not what you need, then; although it -can- solve the matter, it is more than what you'd need. What you would need is just set up the theme colors manually using the theme setting.

    There are these examples that shows you ways to attain that:
    - Customize the chart's theme: Charts > Combination > Custom Theme.
    - Use one of the predefined themes: Charts > Misc > Theme
    - Define the bars as gradient or advanced colors/effects (this uses renderer for full control): Charts > Column > Gradient.

    So if what you want it just custom colors in the chart, you can just specify the column colors, in order, using the ext:ChartTheme component, and then reference that theme in the ext:CartesianChart's Theme config.

    p.s.: I modified your last post with the js code to format and wrap the code block within [code][/code] tags. I kindly ask you to do so when you share code in the forums, as that really helps us read your code (this is in forum guidelines, just in case).
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello @vamsi!

    Did the chart theme information provided above help you at all, or do you still need help on this issue? If so, what's the state you are in now with that?

    We may mark this thread as closed if you still don't respond in 7+ days from now, but we are not going to lock up the thread so, take your time, you would still be able to post a follow-up here whenever you feel like it.

    Looking forward to your feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid WidgetColumn, Pie and Bar colors
    By ifminfomaster in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 22, 2016, 11:25 PM
  2. Change background Color of bars in a chart
    By adan in forum 2.x Help
    Replies: 2
    Last Post: Mar 15, 2016, 6:46 PM
  3. [CLOSED] Ext Chart - borders on bars
    By Prasoon in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 29, 2015, 1:33 PM
  4. [CLOSED] Custom Colors
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 10, 2012, 5:10 PM
  5. ColorPalette custom colors
    By cwolcott in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2012, 11:15 AM

Posting Permissions