</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">ComponentOne MVC5 Tools for ASP.NET Wijmo</div> <div id="PageTitle"><div id="PageTitleText">Define SeriesHoverStyles</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="Widgets.html">Widgets</a> > <a href="ChartWidgets.html">Chart Widgets</a> > <a href="Wijbarchart.html">wijbarchart</a> > <a href="Wijbarchart_HowTo.html">How To</a> > Define SeriesHoverStyles</td></tr></table></div> <div id="BodyContent"> <p>To define the color and stroke style for the series and the hover series, use the following code:</p> <pre> <code>seriesStyles: [{ opacity: 0.8, fill: "0-#333333-#2d2d2d", stroke: "#2d2d2d", "stroke-width": "1.5" }, { opacity: 0.8, fill: "0-#6aaba7-#5f9996", stroke: "#5f9996", "stroke-width": "1.5" }, { opacity: 0.8, fill: "0-#c3ff00-#afe500", stroke: "#afe500", "stroke-width": "1.5" }], seriesHoverStyles: [{ opacity: 1, "stroke-width": "2.5" }, { opacity: 1, "stroke-width": "2.5", stroke: "2d2d2d" }, { opacity: 1, "stroke-width": "2.5" }]</code> </pre> <p>Notice a larger stroke-width value and a different stroke color was used to emphasize the effect of the bar when you hover over it.</p> <p><img src="images/SeriesHoverStyles.png" width="628" height="382"></p> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright @ GrapeCity, inc. All rights reserved.</p> <a target="_blank" href="http://feedback.componentone.com/forums/255768-asp-net-documentation">Documentation Feedback</a> | <a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> </div> </body> </html>