Wijmo UI for the Web
Highlight a Grid Line
Wijmo User Guide > Widgets > Chart Widgets > BarChart > BarChart How To > 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.
  1. 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.

    Drop down and copy code

    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>
    
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. 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.
See Also

Widgets

Reference

Concepts