Highlight a Grid Line

Building on the Quick Start example, you can hide an axis and its labels using two attributes of the axis option.

Note: For more formatting options that you can use, see the Style Options topic.

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

Gets the axis elements of the chart.
Finds the major grid element with the value 0.2.
Sets the text color for the major grid marker to red.
Sets the thickness of the line for the major grid to 3 pixels.

Hide Axis Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ seriesList: [{ legendEntry: false, data: { x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], y: [.05, .04, .21, .27, .1, .24] } }], }); var barchart = $("#wijbarchart"); elements = barchart.wijbarchart().data().wijbarchart.axisEles; $.each(elements, function (key, value) { if (value.type == 'path') { if (key > 0) { if (elements[key+1].attrs.text == 0.2) { elements[key+1].attr("fill", "red"); value.attr("stroke-width", 3); } } } }); }); </script>

Hide Axis Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [{
                legendEntry: false,
                data: { 
                    x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], 
                    y: [.05, .04, .21, .27, .1, .24] 
                }
            }],
        });
         var barchart = $("#wijbarchart");
         elements = barchart.wijbarchart().data().wijbarchart.axisEles; 
         $.each(elements, function (key, value) {
                 if (value.type == 'path')
                 {
                     if (key > 0) {
                         if (elements[key+1].attrs.text == 0.2) {
                             elements[key+1].attr("fill", "red");
                             value.attr("stroke-width", 3);
                         }
                     }
                 }
        });
    });
</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 with the grid line for 0.2 thicker than the others, and with the corresponding marker text in red, as in the image below.

Widgets

Reference

Concepts