search

Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

data tick width causes partly hiding progress bar #197

Closed vkuehn closed 4 years ago

vkuehn commented 4 years ago

using a linear-gauge which as horizontal layout the progress begins to be partly be hidden when data-ticks-width is over 70 here the complete config

<canvas data-type="linear-gauge"
    data-width="400"
    data-height="100"
    data-animation-duration="750"
    data-animation-rule="linear"
    data-animation-target="plate"
    data-bar-begin-circle="false"
    data-bar-length="95"
    data-bar-stroke-width="0"
    data-bar-width="5"
    data-color-plate="#fff"
    data-color-needle="red"
    data-border-shadow-width="0"
    data-borders="1"
    data-font-numbers-size="30"
    data-max-value="360"
    data-min-value="0"
    data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300,320,340,360"
    data-minor-ticks="10"
    data-needle-side="left"
    data-needle-type="arrow"
    data-needle-width="3"
    data-number-side="left"
    data-ticks-padding="0"
    data-tick-side="left"
    data-ticks-width="50"
    data-stroke-ticks="true"
    data-value="90"
></canvas>
vkuehn commented 4 years ago

closing as I found other solutions