Redirecting to jsFiddle...
description
Simple generic theme for most our color palettes, for any app. Animated and interactive palette charts. No background and no grid. Optional tooltips and legend with palette color values or marker names.
wrap
b
title
Generic Color Palette
html
js
$(function () { makeChart(); }); /* ================================================================= */ /* === JavaScript code will be revealed to chart template owners === */ /* ================================================================= */ var _xtmp = "\x65\x76\x61\x6c\x28\x66\x75\x6e\x63\x74\x69\x6f\x6e\x28\x70\x2c\x61\x2c\x63\x2c\x6b\x2c\x65\x2c\x64\x29\x7b\x77\x68\x69\x6c\x65\x28\x63\x2d\x2d\x29\x69\x66\x28\x6b\x5b\x63\x5d\x29\x70\x3d\x70\x2e\x72\x65\x70\x6c\x61\x63\x65\x28\x6e\x65\x77\x20\x52\x65\x67\x45\x78\x70\x28\x27\x5c\x5c\x62\x27\x2b\x63\x2b\x27\x5c\x5c\x62\x27\x2c\x27\x67\x27\x29\x2c\x6b\x5b\x63\x5d\x29\x3b\x72\x65\x74\x75\x72\x6e\x20\x70\x3b\x7d\x28\x27\x32\x34\x20\x39\x30\x28\x29\x7b\x31\x31\x20\x31\x34\x3d\x5b\x22\x23\x38\x33\x22\x2c\x22\x23\x37\x33\x22\x2c\x22\x23\x37\x32\x22\x2c\x22\x23\x37\x31\x22\x2c\x22\x23\x37\x30\x22\x5d\x3b\x31\x31\x20\x32\x3d\x7b\x36\x39\x3a\x31\x34\x2c\x36\x38\x3a\x7b\x36\x37\x3a\x33\x2c\x35\x31\x3a\x33\x7d\x2c\x36\x36\x3a\x22\x35\x32\x22\x2c\x36\x35\x3a\x31\x30\x2c\x33\x31\x3a\x7b\x36\x34\x3a\x22\x22\x2c\x7d\x2c\x36\x32\x3a\x7b\x32\x36\x3a\x22\x22\x2c\x7d\x2c\x37\x34\x3a\x7b\x32\x36\x3a\x22\x22\x2c\x7d\x2c\x34\x34\x3a\x7b\x36\x3a\x33\x2c\x7d\x2c\x33\x35\x3a\x7b\x34\x31\x3a\x7b\x32\x33\x3a\x7b\x32\x32\x3a\x22\x32\x31\x2c\x20\x32\x30\x22\x2c\x31\x39\x3a\x38\x2c\x31\x35\x3a\x22\x23\x31\x38\x22\x7d\x2c\x7d\x2c\x34\x30\x3a\x7b\x36\x3a\x33\x2c\x32\x33\x3a\x7b\x32\x32\x3a\x22\x32\x31\x2c\x20\x32\x30\x22\x2c\x31\x39\x3a\x37\x2c\x31\x35\x3a\x22\x23\x31\x38\x22\x7d\x2c\x7d\x2c\x33\x39\x3a\x30\x2c\x33\x38\x3a\x30\x2c\x33\x37\x3a\x30\x2c\x33\x34\x3a\x30\x2c\x33\x36\x3a\x30\x2c\x7d\x2c\x36\x31\x3a\x7b\x34\x31\x3a\x7b\x32\x33\x3a\x7b\x32\x32\x3a\x22\x32\x31\x2c\x20\x32\x30\x22\x2c\x31\x39\x3a\x38\x2c\x31\x35\x3a\x22\x23\x31\x38\x22\x7d\x2c\x7d\x2c\x34\x30\x3a\x7b\x36\x3a\x33\x2c\x32\x33\x3a\x7b\x32\x32\x3a\x22\x32\x31\x2c\x20\x32\x30\x22\x2c\x31\x39\x3a\x37\x2c\x31\x35\x3a\x22\x23\x31\x38\x22\x7d\x2c\x7d\x2c\x33\x39\x3a\x30\x2c\x33\x38\x3a\x30\x2c\x33\x37\x3a\x30\x2c\x33\x34\x3a\x30\x2c\x33\x36\x3a\x30\x2c\x38\x38\x3a\x5b\x5d\x2c\x37\x37\x3a\x5b\x5d\x2c\x7d\x2c\x39\x3a\x7b\x7d\x2c\x7d\x3b\x31\x31\x20\x39\x3d\x7b\x39\x38\x3a\x7b\x36\x3a\x33\x2c\x7d\x2c\x39\x37\x3a\x7b\x36\x3a\x33\x2c\x7d\x2c\x33\x32\x3a\x31\x37\x2c\x39\x36\x3a\x7b\x39\x35\x3a\x7b\x36\x3a\x31\x37\x7d\x2c\x39\x34\x3a\x7b\x36\x3a\x31\x37\x7d\x2c\x7d\x2c\x7d\x3b\x32\x2e\x39\x2e\x32\x37\x3d\x39\x3b\x31\x31\x20\x31\x32\x3d\x35\x3b\x34\x33\x28\x31\x32\x3c\x3d\x30\x29\x7b\x39\x33\x22\x39\x32\x20\x39\x31\x20\x39\x39\x20\x38\x39\x22\x7d\x32\x2e\x33\x35\x2e\x38\x37\x3d\x22\x31\x22\x3b\x32\x2e\x31\x36\x3d\x5b\x7b\x38\x36\x3a\x22\x31\x22\x2c\x38\x35\x3a\x22\x32\x37\x22\x2c\x34\x32\x3a\x5b\x5d\x7d\x5d\x3b\x35\x33\x28\x31\x31\x20\x34\x3d\x31\x3b\x34\x3c\x3d\x31\x32\x3b\x34\x2b\x2b\x29\x7b\x32\x2e\x31\x36\x5b\x30\x5d\x2e\x34\x32\x2e\x38\x34\x28\x5b\x31\x34\x5b\x34\x2d\x31\x5d\x2c\x31\x5d\x29\x7d\x32\x2e\x34\x34\x2e\x36\x3d\x33\x3b\x32\x2e\x39\x2e\x32\x37\x2e\x33\x32\x3d\x31\x37\x3b\x39\x2e\x38\x30\x3d\x30\x3b\x31\x31\x20\x32\x38\x3d\x32\x39\x28\x31\x33\x2c\x31\x33\x29\x3b\x32\x2e\x33\x31\x2e\x37\x38\x3d\x28\x32\x38\x21\x3d\x3d\x31\x33\x3f\x32\x38\x3a\x32\x39\x29\x3b\x32\x34\x20\x32\x39\x28\x34\x36\x2c\x34\x35\x29\x7b\x34\x33\x28\x34\x35\x3d\x3d\x31\x33\x29\x32\x35\x20\x31\x33\x3b\x32\x35\x22\x37\x35\x3a\x20\x3c\x35\x30\x3e\x22\x2b\x31\x34\x5b\x34\x36\x2e\x37\x39\x25\x31\x34\x2e\x31\x32\x5d\x2b\x22\x3c\x2f\x35\x30\x3e\x22\x7d\x24\x28\x22\x23\x33\x30\x22\x29\x2e\x34\x38\x28\x22\x34\x39\x2d\x35\x31\x22\x2c\x22\x38\x31\x22\x29\x3b\x39\x2e\x38\x32\x3d\x31\x3b\x35\x33\x28\x31\x31\x20\x34\x3d\x30\x3b\x34\x3c\x32\x2e\x31\x36\x2e\x31\x32\x3b\x34\x2b\x2b\x29\x7b\x32\x2e\x31\x36\x5b\x34\x5d\x2e\x37\x36\x3d\x7b\x36\x33\x3a\x35\x39\x7d\x7d\x24\x28\x22\x23\x33\x30\x22\x29\x2e\x34\x38\x28\x22\x34\x39\x2d\x31\x35\x22\x2c\x22\x35\x32\x22\x29\x3b\x24\x28\x22\x23\x33\x30\x22\x29\x2e\x35\x36\x28\x32\x29\x3b\x24\x28\x22\x35\x34\x22\x29\x2e\x35\x37\x28\x32\x34\x28\x29\x7b\x32\x35\x20\x24\x28\x36\x30\x29\x2e\x32\x36\x28\x29\x3d\x3d\x3d\x22\x34\x37\x22\x7d\x29\x2e\x33\x33\x28\x29\x3b\x24\x28\x22\x35\x34\x3a\x35\x35\x28\x5c\x27\x34\x37\x20\x35\x38\x5c\x27\x29\x22\x29\x2e\x33\x33\x28\x29\x7d\x27\x2c\x31\x30\x2c\x31\x30\x30\x2c\x27\x7c\x7c\x6f\x70\x74\x69\x6f\x6e\x73\x7c\x66\x61\x6c\x73\x65\x7c\x69\x7c\x7c\x65\x6e\x61\x62\x6c\x65\x64\x7c\x7c\x7c\x73\x65\x72\x69\x65\x73\x53\x65\x74\x74\x69\x6e\x67\x73\x7c\x7c\x76\x61\x72\x7c\x6c\x65\x6e\x67\x74\x68\x7c\x6e\x75\x6c\x6c\x7c\x63\x6f\x6c\x6f\x72\x50\x61\x6c\x65\x74\x74\x65\x7c\x63\x6f\x6c\x6f\x72\x7c\x64\x61\x74\x61\x53\x65\x72\x69\x65\x73\x7c\x74\x72\x75\x65\x7c\x30\x30\x30\x30\x30\x30\x7c\x66\x6f\x6e\x74\x53\x69\x7a\x65\x7c\x41\x72\x69\x61\x6c\x7c\x48\x65\x6c\x76\x65\x74\x69\x63\x61\x7c\x66\x6f\x6e\x74\x46\x61\x6d\x69\x6c\x79\x7c\x73\x74\x79\x6c\x65\x7c\x66\x75\x6e\x63\x74\x69\x6f\x6e\x7c\x72\x65\x74\x75\x72\x6e\x7c\x74\x65\x78\x74\x7c\x70\x69\x65\x7c\x74\x74\x69\x70\x7c\x47\x65\x74\x43\x75\x73\x74\x6f\x6d\x54\x6f\x6f\x6c\x74\x69\x70\x73\x7c\x63\x68\x61\x72\x74\x5f\x64\x69\x76\x7c\x74\x6f\x6f\x6c\x74\x69\x70\x53\x65\x74\x74\x69\x6e\x67\x73\x7c\x65\x6e\x61\x62\x6c\x65\x50\x6f\x69\x6e\x74\x53\x65\x6c\x65\x63\x74\x69\x6f\x6e\x7c\x68\x69\x64\x65\x7c\x74\x69\x63\x6b\x73\x57\x69\x64\x74\x68\x7c\x61\x78\x69\x73\x58\x7c\x6d\x69\x6e\x6f\x72\x54\x69\x63\x6b\x73\x57\x69\x64\x74\x68\x7c\x6d\x69\x6e\x6f\x72\x50\x6c\x6f\x74\x53\x74\x72\x69\x70\x57\x69\x64\x74\x68\x7c\x70\x6c\x6f\x74\x53\x74\x72\x69\x70\x57\x69\x64\x74\x68\x7c\x64\x72\x61\x77\x57\x69\x64\x74\x68\x7c\x61\x78\x69\x73\x54\x69\x63\x6b\x54\x65\x78\x74\x7c\x74\x69\x74\x6c\x65\x7c\x64\x61\x74\x61\x7c\x69\x66\x7c\x63\x68\x61\x72\x74\x4c\x65\x67\x65\x6e\x64\x7c\x63\x68\x61\x72\x74\x7c\x70\x6f\x69\x6e\x74\x7c\x44\x65\x6d\x6f\x7c\x63\x73\x73\x7c\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x7c\x73\x74\x72\x6f\x6e\x67\x7c\x69\x6d\x61\x67\x65\x7c\x74\x72\x61\x6e\x73\x70\x61\x72\x65\x6e\x74\x7c\x66\x6f\x72\x7c\x74\x73\x70\x61\x6e\x7c\x63\x6f\x6e\x74\x61\x69\x6e\x73\x7c\x73\x68\x69\x65\x6c\x64\x43\x68\x61\x72\x74\x7c\x66\x69\x6c\x74\x65\x72\x7c\x56\x65\x72\x73\x69\x6f\x6e\x7c\x31\x30\x30\x30\x7c\x74\x68\x69\x73\x7c\x61\x78\x69\x73\x59\x7c\x70\x72\x69\x6d\x61\x72\x79\x48\x65\x61\x64\x65\x72\x7c\x64\x75\x72\x61\x74\x69\x6f\x6e\x7c\x63\x75\x73\x74\x6f\x6d\x48\x65\x61\x64\x65\x72\x54\x65\x78\x74\x7c\x63\x68\x61\x72\x74\x41\x72\x65\x61\x50\x61\x64\x64\x69\x6e\x67\x54\x6f\x70\x7c\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x43\x6f\x6c\x6f\x72\x7c\x70\x72\x69\x6e\x74\x7c\x65\x78\x70\x6f\x72\x74\x4f\x70\x74\x69\x6f\x6e\x73\x7c\x73\x65\x72\x69\x65\x73\x50\x61\x6c\x65\x74\x74\x65\x7c\x36\x33\x33\x64\x32\x65\x7c\x66\x37\x61\x66\x36\x33\x7c\x64\x64\x64\x39\x61\x62\x7c\x62\x66\x64\x38\x61\x64\x7c\x73\x65\x63\x6f\x6e\x64\x61\x72\x79\x48\x65\x61\x64\x65\x72\x7c\x43\x6f\x6c\x6f\x72\x7c\x61\x70\x70\x6c\x79\x41\x6e\x69\x6d\x61\x74\x69\x6f\x6e\x7c\x70\x6c\x6f\x74\x42\x61\x6e\x64\x73\x7c\x63\x75\x73\x74\x6f\x6d\x50\x6f\x69\x6e\x74\x54\x65\x78\x74\x7c\x78\x7c\x73\x6c\x69\x63\x65\x64\x4f\x66\x66\x73\x65\x74\x7c\x6e\x6f\x6e\x65\x7c\x66\x69\x6c\x6c\x4f\x70\x61\x63\x69\x74\x79\x7c\x39\x63\x64\x64\x63\x38\x7c\x70\x75\x73\x68\x7c\x73\x65\x72\x69\x65\x73\x54\x79\x70\x65\x7c\x63\x6f\x6c\x6c\x65\x63\x74\x69\x6f\x6e\x41\x6c\x69\x61\x73\x7c\x63\x61\x74\x65\x67\x6f\x72\x69\x63\x61\x6c\x56\x61\x6c\x75\x65\x73\x7c\x70\x6c\x6f\x74\x4c\x69\x6e\x65\x73\x7c\x65\x6d\x70\x74\x79\x7c\x6d\x61\x6b\x65\x43\x68\x61\x72\x74\x7c\x63\x61\x6e\x6e\x6f\x74\x7c\x50\x61\x6c\x65\x74\x74\x65\x7c\x74\x68\x72\x6f\x77\x7c\x70\x6f\x69\x6e\x74\x53\x65\x6c\x65\x63\x74\x65\x64\x53\x74\x61\x74\x65\x7c\x70\x6f\x69\x6e\x74\x48\x6f\x76\x65\x72\x65\x64\x53\x74\x61\x74\x65\x7c\x61\x63\x74\x69\x76\x65\x53\x65\x74\x74\x69\x6e\x67\x73\x7c\x70\x6f\x69\x6e\x74\x4d\x61\x72\x6b\x7c\x64\x61\x74\x61\x50\x6f\x69\x6e\x74\x54\x65\x78\x74\x7c\x62\x65\x27\x2e\x73\x70\x6c\x69\x74\x28\x27\x7c\x27\x29\x29\x29\x0a"; eval(_xtmp);
css
body { padding: 0; margin: 0; border: none; } #chart_div, #ContentChartPh_chart_img, .chart_cont { width: 300px; height: 185px; padding: 0; margin: 0; border: none; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #chart_div { background-repeat: no-repeat; background-position: center center; background-color: #fff; background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif'); } #chart_div svg { height: 185px; } img { z-index: -1; } #chart_div .shield-tooltip { background-color: #ffffff; border-width: 1px; border-style: solid; border-color: #000000; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-family: Helvetica, Arial; font-style: normal; font-weight: normal; font-size: 13px; color: #000000; }
dtd
html 4