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 31 32 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class FlexChartController { 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 103 104 105 106 107 108 109 110 111 | @model IEnumerable<Fruit>@using C1.Web.Mvc.Chart@{ ViewBag.DemoSettings = true; var palete = new List<System.Drawing.Color>() { System.Drawing.Color.Orange, System.Drawing.Color.LightGreen };}@section Scripts{ <script> var chart; c1.documentReady(function () { chart = wijmo.Control.getControl('#chartDemo'); }); function customChangeStyle(control, value) { chart.tooltip.cssClass = value; } </script>}<style> .orange-series { background-color: orange; } .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>@(Html.C1().FlexChart().Id("chartDemo") .ChartType(ChartType.Bar) .Bind(Model) .BindingX("Name").Legend(Position.None) .DataLabel(label => { label.Content("{y}"); }) .Palette(palete) .Series(sers => { sers.Add().Name("March").Binding("MarPrice"); sers.Add().Name("April").Binding("AprPrice"); }) .Tooltip(toolt => { toolt.CssClass("green-white-tooltip"); }))@section Summary{ @Html.Raw(Resources.FlexChart.Tooltips_Text0)}@section Description{ <p>@Html.Raw(Resources.FlexChart.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> } |