Wijmo UI for the Web
Clickable Legend
By default, the bar chart allows users to click a legend entry to toggle the data series it represents in the chart. The first click hides the chart elements for the data series. The second click toggles the bars, bubbles, line, or pie wedge for the data series back to visible.
Toggled Off
Toggled On
You may not always want to allow this functionality. If you want to disable it, add code like the following to your script, inside the document ready function:
| Turn Off Legend Click Function |
Copy Code |
|---|---|
$(".wijchart-legend").click(function () { return false;});
| |
The entire script looks something like this:
| Chart Script |
Copy Code |
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijcompositechart").wijcompositechart({
axis: {y: {text: "Total Hardware"}},
hint: {
content: function () {return this.label + '\n ' + this.y + '';}
},
header: {text: "Hardware Distribution"},
seriesList: [
{
type: "column",
label: "West",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [5, 3, 4, 7, 2] }
},
{
type: "column",
label: "Central",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [2, 2, 3, 2, 1] }
},
{
type: "column",
label: "East",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 4, 4, 2, 5] }
},
{
type: "pie",
label: "asdfdsfdsf",
center: { x: 150, y: 150 },
radius: 60,
data: [
{label: "MacBook Pro", data: 46.78},
{label: "iMac", data: 23.18},
{label: "MacBook", data: 20.25}]
},
{
type: "line",
label: "Steam1",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [3, 6, 2, 9, 5]
},
markers: {visible: true, type: "circle"}
},
{
type: "line",
label: "Steam2",
data: {
x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
y: [1, 3, 4, 7, 2]
},
markers: {visible: true, type: "tri"}
}
]
});
$(".wijchart-legend").click(function () { return false;});
});
</script>
| |