FlexChart
FlexChart
Tooltip Styles
This example shows how to specify style for Tooltips using CssClass properties.
Features
Settings
Style: green-white-tooltip
Description
The Tooltips style can be changed by setting CssClass property with CSS like following:
.green-white-tooltip { background-color: green; color: white; } .red-yellow-tooltip { background-color: red; color: yellow; } .gradient-tooltip { background-color: greenyellow; background-image: radial-gradient(circle at top right, yellow, #f06d06 50%); color: black; } .text-style-tooltip { background-color: lightyellow; color: black; font-style: oblique; text-shadow: 2px 2px 5px green; } .strong-round-tooltip { background-color: palegreen; color: black; border-radius: 20%; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult Tooltips() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary< string , object []> { { "Style" , new object []{ "green-white-tooltip" , "red-yellow-tooltip" , "gradient-tooltip" , "text-style-tooltip" , "strong-round-tooltip" , "default-tooltip" } } } }; return View(Fruit.GetFruitsSales()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | @model IEnumerable< Fruit > @ { ViewBag.DemoSettings = true ; var palete = new List< string >() { "Orange" , "LightGreen" }; } @section Scripts{ <script> var chart; c1.documentReady( function () { chart = wijmo.Control.getControl( '#chartDemo' ); }); function customChangeStyle(control, value) { chart.tooltip.cssClass = value; } </script> } < style > .green-white-tooltip { background-color: green; color: white; } .red-yellow-tooltip { background-color: red; color: yellow; } .gradient-tooltip { background-color: greenyellow; background-image: radial-gradient(circle at top right, yellow, #f06d06 50%); color: black; } .text-style-tooltip { background-color: lightyellow; color: black; font-style: oblique; text-shadow: 2px 2px 5px green; } .strong-round-tooltip { background-color: palegreen; color: black; border-radius: 20%; } </ style > < c1-flex-chart id = "chartDemo" binding-x = "Name" chart-type = "Bar" legend-position = "None" palette = "@palete" > < c1-flex-chart-datalabel content = "{y}" /> < c1-items-source source-collection = "Model" /> < c1-flex-chart-series name = "March" binding = "MarPrice" ></ c1-flex-chart-series > < c1-flex-chart-series name = "April" binding = "AprPrice" ></ c1-flex-chart-series > < c1-flex-chart-tooltip class = "green-white-tooltip" ></ c1-flex-chart-tooltip > </ c1-flex-chart > @section Summary{ @Html .Raw(FlexChartRes.Tooltips_Text0) } @section Description{ < p > @Html .Raw(FlexChartRes.Tooltips_Text1)</ p > < pre > .green-white-tooltip { background-color: green; color: white; } .red-yellow-tooltip { background-color: red; color: yellow; } .gradient-tooltip { background-color: greenyellow; background-image: radial-gradient(circle at top right, yellow, #f06d06 50%); color: black; } .text-style-tooltip { background-color: lightyellow; color: black; font-style: oblique; text-shadow: 2px 2px 5px green; } .strong-round-tooltip { background-color: palegreen; color: black; border-radius: 20%; } </ pre > } |