Change Bar Color by Value

Building on the Quick Start example, you can change the color of your bars depending on the data value to make your data easier to understand.

Note: Initially, the chart shows the bar.hoverStyle fill color, and then when you mouse out of the bar, it shows the seriesStyle fill color. For this reason, we must set our color values in two places to prevent them from changing on mouse out.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets the header text so that a title appears along the top.
Changes the orientation of the bars from horizontal to vertical.
Creates a series with the following properties:
- Tooltips display with "Big Ten Championships" and the data value when you mouse over each bar.
- No legend displays.
- The X axis displays each of the Big Ten teams.
- The Y axis displays the number of Big Ten Championships the team has won.
Creates a mouseOut function that gets the data.y value for each bar, and when you move the mouse out of the bar, sets the fill color to red, yellow, or green, depending on the value.
Sets the initial fill color of each bar to the same colors set in the mouseOut function.

Change Bar Color Script	Copy Code
<script type="text/javascript"> var fill = ""; $(document).ready(function () { $("#chart").wijbarchart({ header: {text: "Big Ten Championships"}, horizontal: false, seriesList: [{ label: "Big Ten Championships", legendEntry: false, data: { x: ['Illinois', 'Indiana', 'Iowa', 'Michigan', 'Michigan State', 'Minnesota', 'Nebraska', 'Northwestern', 'Ohio State', 'Penn State', 'Purdue', 'Wisconsin'], y: [230, 167, 105, 351, 84, 178, 3, 69, 185, 57, 69, 183] } }], mouseOut: function (e, data) { var y = data.y, bar = data.bar; if (y < 100) { bar.attr({ fill: "red", stroke: "none" }); } if (y > 100 && y < 200) { bar.attr({ fill: "yellow", stroke: "none" }); } if (y > 200) { bar.attr({ fill: "green", stroke: "none" }); } } }); var bars = $("#chart").data("fields").chartElements.bars; $.each(bars, function (i, bar) { var node = bar.node, data = $(node).data("wijchartDataObj"), y = data.y; if (y < 100) { bar.attr({ fill: "red", stroke: "none" }); } if (y > 100 && y < 200) { bar.attr({ fill: "yellow", stroke: "none" }); } if (y > 200) { bar.attr({ fill: "green", stroke: "none" }); } }) }); </script>

Change Bar Color Script

Copy Code

<script type="text/javascript">
    var fill = "";
    $(document).ready(function () {
        $("#chart").wijbarchart({
            header: {text: "Big Ten Championships"},
            horizontal: false,
            seriesList: [{
                label: "Big Ten Championships",
                legendEntry: false,
                data: {
                    x: ['Illinois', 'Indiana', 'Iowa', 'Michigan', 'Michigan State', 
                        'Minnesota', 'Nebraska', 'Northwestern', 'Ohio State', 
                        'Penn State', 'Purdue', 'Wisconsin'],
                    y: [230, 167, 105, 351, 84, 178, 3, 69, 185, 57, 69, 183]
                }
            }],
            mouseOut: function (e, data) {
                var y = data.y,
                bar = data.bar;
                if (y < 100) {
                    bar.attr({ fill: "red", stroke: "none" });
                }
                if (y > 100 && y < 200) {
                    bar.attr({ fill: "yellow", stroke: "none" });
                }
                if (y > 200) {
                    bar.attr({ fill: "green", stroke: "none" });
                }
            }
        });
    var bars = $("#chart").data("fields").chartElements.bars;
    $.each(bars, function (i, bar) {
        var node = bar.node,
        data = $(node).data("wijchartDataObj"),
        y = data.y;
        if (y < 100) {
            bar.attr({ fill: "red", stroke: "none" });
        }
        if (y > 100 && y < 200) {
            bar.attr({ fill: "yellow", stroke: "none" });
        }
        if (y > 200) {
            bar.attr({ fill: "green", stroke: "none" });
        }
    })
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the one in the image below, with colors that help clarify the data values.

Image Title

Reference