Search the Community
Showing results for tags 'graphics'.
-
For the past few days, I'm struggling with one Chart.js chart that I want to clip or mask with custom vector path. I was able to do something like what I want, but I think I'm missing something. The approach that I took is to create the chart in html (the traditional way, with html canvas ..etc) and then create a svg with the shape I want to cut off and then overlay the <canvas> and <svg> elements. This is what I was able to accomplish: js: var config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', fill: false, borderColor: "red", backgroundColor: "red", data: [ {x:23,y:57}, {x:43,y:67}, {x:143,y:167} ] }, { label: 'My Second dataset ', fill: false, borderColor: "blue", backgroundColor: "blue", data: [ {x:12,y:76}, {x:23,y:89}, {x:143,y:167} ] }] }, options: { title: { display: false, text: 'Chart.js Line Chart' } } }; window.onload = function () { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; css: canvas { position: absolute; z-index: 0; } svg { position: absolute; z-index: 1; } body { background-color: white; } html: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <head> <title> My cutoff chart </title> </head> <body> <canvas id="canvas"></canvas> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style> #clickHandler { pointer-events: all; } </style> <path id="ship" d="m 100.09542,69.20104 h -83.5475 v -0.41351 -0.41351 l -0.595313,0.0828 -0.595312,0.0828 -0.01659,-0.66146 -0.01659,-0.66146 -0.380288,0.12526 -0.380288,0.12526 -1.890519,0.007 -1.890518,0.007 -0.556877,-0.50403 -0.556878,-0.50403 v -0.38141 -0.38142 l 1.06532,-1.21026 1.065319,-1.21027 -0.09501,-0.28554 -0.09501,-0.28554 -1.433331,-0.20539 -1.433331,-0.20539 -0.859896,-0.13733 -0.859896,-0.13733 v -0.38353 -0.38353 l -1.220114,-0.57352 -1.220114,-0.57352 -0.737049,-1.01747 -0.73705,-1.01747 -0.8116695,-2.57755 -0.8116695,-2.57756 -0.3901093,-1.98437 -0.3901092,-1.98438 -0.1825245,-1.65364 -0.1825245,-1.65365 h 1.5141537 1.5141538 l 0.132161,-0.50538 0.132161,-0.50539 2.753486,-0.18768 2.753485,-0.18767 v -0.35283 -0.35282 l 0.307053,-0.6739 0.307053,-0.67391 h 1.904977 1.904977 l 1.193236,-0.16355 1.193236,-0.16355 0.365047,-0.8067 0.365045,-0.8067 1.190625,-0.37783 1.190625,-0.37784 4.034896,-0.1393 4.034896,-0.13929 v -0.30579 -0.30578 l 0.849273,-0.74523 0.849272,-0.74522 1.393399,-0.14381 1.393397,-0.14381 0.16044,-0.5055 0.160438,-0.5055 -0.328146,-0.39539 -0.328147,-0.39539 0.311142,-0.31114 0.311142,-0.31114 1.80399,-0.10194 1.80399,-0.10193 0.314769,-0.87049 0.314772,-0.87048 0.939179,-0.17619 0.939175,-0.17619 0.380341,-0.91029 0.380341,-0.91028 h 0.365017 0.365016 l 0.1606,-0.41852 0.160599,-0.41851 v -0.99569 -0.99568 l 0.522388,-0.47276 0.522386,-0.47275 0.668239,0.43784 0.668237,0.43785 0.02929,0.45692 0.02929,0.45692 -0.05502,0.66146 -0.05502,0.66146 0.224168,-0.21512 0.224168,-0.21513 0.410602,-2.16612 0.410601,-2.16613 0.712267,-0.34439 0.712266,-0.3444 0.157782,-0.62865 0.157778,-0.62864 0.372999,-0.14314 0.372997,-0.14313 v -1.46351 -1.46351 h 0.264583 0.264583 l 0.0013,1.91822 0.0013,1.91823 0.169696,2.94481 0.169696,2.9448 2.130634,0.12334 2.130634,0.12334 0.101764,0.30529 0.101767,0.3053 h 0.882353 0.882354 l 0.418512,0.1606 0.418516,0.1606 v 0.50086 0.50086 h 5.277839 5.277839 l 0.07997,-1.38907 0.07997,-1.38906 2.513542,-0.17857 2.513541,-0.17856 3.79988,-0.51512 3.799877,-0.51511 0.180554,-0.29215 0.180555,-0.29214 0.606329,-3.31745 0.606333,-3.31746 0.393073,-0.39307 0.393073,-0.39308 h 0.852265 0.852268 l 0.317889,-1.18854 0.317886,-1.18855 3.459062,0.10402 3.459061,0.10403 0.169617,0.16961 0.169614,0.16962 0.143208,5.34668 0.142968,5.34667 1.717418,0.1323 1.717416,0.13229 0.08401,0.52916 0.08401,0.52917 0.1346,0.39688 0.13459,0.39687 0.25994,-0.46302 0.25993,-0.46302 h 3.9273 3.92729 l 0.1523,0.39687 0.1523,0.39688 h 1.63278 1.63278 l 0.35148,-0.46302 0.35148,-0.46302 0.008,-0.46302 0.008,-0.46302 h 3.28946 3.28947 l 0.16795,0.52916 0.16795,0.52917 h 6.59675 6.59676 v -0.52917 -0.52916 h 3.30729 3.30729 v -0.75275 -0.75274 l 0.48385,-0.43788 0.48386,-0.43788 h 0.40118 0.40118 l 0.46944,0.51872 0.46945,0.51874 -0.12644,0.73804 -0.12643,0.73804 -0.19802,0.46302 -0.19802,0.46302 4.72466,-0.003 4.72466,-0.003 0.99752,-0.16487 0.99752,-0.16486 -0.1725,-0.91953 -0.17251,-0.91953 0.35298,-0.21815 0.35298,-0.21815 0.21107,0.13044 0.21107,0.13045 v 1.04272 1.04272 h 1.29052 1.29052 l 0.28495,-0.34335 0.28495,-0.34335 0.14065,-2.7655 0.14064,-2.76551 0.1645,-2.11667 0.16451,-2.11666 0.91522,-1.12448 0.91522,-1.12448 h 0.24687 0.24687 v 1.98437 1.98438 h 1.05833 1.05833 v 0.26458 0.26459 h -0.24701 -0.24701 l -0.0837,0.71713 -0.0837,0.71715 -0.66145,0.18252 -0.66146,0.18253 1.24115,0.0264 1.24116,0.0264 0.17453,0.28239 0.17452,0.28239 -0.55578,0.14534 -0.55579,0.14535 v 0.74612 0.74613 l -0.8599,0.0829 -0.85989,0.0829 v 1.19063 1.19062 l 0.85989,0.0829 0.8599,0.0829 v -0.66891 -0.66892 l -0.53658,-0.28716 -0.53658,-0.28717 0.15532,-0.25131 0.15532,-0.25132 h 1.0271 1.02711 l 0.15347,0.24832 0.15347,0.24832 -0.46859,0.28798 -0.46858,0.28797 0.66146,-0.0733 0.66145,-0.0733 0.0677,-1.71979 0.0677,-1.71979 0.14895,-0.64766 0.14894,-0.64766 0.24235,0.38307 0.24235,0.38308 0.004,2.26219 0.004,2.26219 0.3175,0.3175 0.3175,0.3175 h 0.47625 0.47625 v 0.64362 0.64363 l 0.5268,0.1672 0.52679,0.1672 0.26696,-0.16498 0.26695,-0.16499 v -0.52916 -0.52917 l 0.26458,0.16352 0.26458,0.16352 v 0.51 0.51 l 0.8599,0.35945 0.8599,0.35943 0.36113,0.43546 0.36113,0.43546 -0.18881,1.25917 -0.18881,1.25918 -0.23314,0.43567 -0.23314,0.43568 0.65613,0.16468 0.65613,0.16467 2.1e-4,0.45798 2.1e-4,0.45798 0.75188,1.5875 0.75189,1.5875 1.23054,1.91823 1.23055,1.91823 0.33246,0.037 0.33247,0.037 0.97177,-0.0577 0.97177,-0.0577 0.29431,0.54992 0.29431,0.54992 h 0.63653 0.63654 l 0.18667,-0.30203 0.18667,-0.30204 0.15967,-2.1242 0.15967,-2.1242 0.33073,-0.10935 0.33073,-0.10936 5.3e-4,2.20487 5.3e-4,2.20486 3.0196,0.0151 3.0196,0.0151 0.4194,0.34806 0.41939,0.34807 1.4e-4,0.16604 1.3e-4,0.16604 -2.40702,-0.0934 -2.40701,-0.0934 -0.29187,0.29186 -0.29174,0.29187 2.23573,0.0403 2.23573,0.0403 0.26458,0.0615 0.26458,0.0615 1.91823,0.0305 1.91823,0.0305 v 0.42473 0.42473 l 4.16719,-0.17789 4.16719,-0.17789 1.51081,-0.27919 1.51082,-0.27919 0.40741,0.15633 0.40741,0.15634 v 0.48438 0.48438 l -2.40439,2.50049 -2.4044,2.50049 -1.84101,2.24895 -1.841,2.24896 -1.31085,2.60364 -1.31085,2.60364 v 0.63751 0.6375 l 0.8599,0.0355 0.8599,0.0355 1.05833,-0.0538 1.05833,-0.0538 0.92604,0.63314 0.92605,0.63314 -0.0719,0.87537 -0.0719,0.87537 -0.45725,0.7761 -0.45726,0.77609 -1.35008,0.89689 -1.35008,0.89688 -1.9519,0.5409 -1.95188,0.5409 z m 33.00145,-39.6875 h 0.1323 v -0.13229 -0.13229 h -0.1323 -0.13229 v 0.13229 0.13229 z m 20.54212,-7.82802 0.22768,-0.14071 v -0.24897 -0.24897 h -0.39688 -0.39687 v 0.22049 0.22049 l 0.16919,0.16919 0.1692,0.1692 z" /> <rect id="bg" x="-1%" y="-1%" width="102%" height="102%"/> <mask id="myMask"> <use xlink:href="#bg" fill="white"/> <use xlink:href="#ship" fill="black" /> </mask> </defs> <use xlink:href="#bg" mask="url(#myMask)" fill="chocolate" fill-opacity="0.5"/> <use xlink:href="#ship" fill="none" id="clickHandler" style="fill:none; stroke-width:0.264583;stroke:black;"/> </svg> </body> Here is a working code pen. So far so good, but I wasn't able to align the chart and the cutout properly. The desired position of the visible part of the chart is inside the blue rectangle: As I said, I'm not sure that I took the best approach for achieving this effect. And to be honest, my knowledge in front-end development and graphical design (using .svg files) are very basic. Any help will be greatly appreciated Thanks in advance, Julian
-
I'm trying to work with SVGs but I'm pretty sure there's going to be some people using the old browsers that don't do this, so I'm looking into installing some kind of a fallback. Is there some way I can do this? Maybe make a DIV with the PNG for the background and containing the SVG?