I want to achieve a bullet chart like the following:
But the highcharts docs don’t have anything written on adding a custom svg or how to achieve the arrow and label on the top of the target marker. Any hint or ideas would be really helpful.
Thanks world.
Advertisement
Answer
You can use any svg icon and position it with css just like any other element. I’m going to show you how I do it myself on my projects.
In the code below notice that I styled simbicon-arrow-dwn with an inline svg just to make it possible running the code here. But in real life you place your icon in an img folder and call it by its url on the css class, just as it is commented in the code.
html, body {
width:100%;
background-color: #f2f2f2;
margin: 0 auto;
}
.navbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
width: 100vw;
top: 0%;
background: #faa;
padding:7px;
box-shadow:0px 0px 15px rgba(55,55,55,0.3);
border-bottom:1px solid rgba(143, 77, 77, 0.5);
}
.left {
grid-column: 1/2;
position: relative;
height: 100%;
left:10px;
}
.right {
grid-column: 3/4;
position: relative;
display: flex;
justify-content: end;
height: 100%;
right:10px;
}
.center
{
grid-column: 2/3;
position: relative;
color:#555;
font-weight:700;
text-align: center;
justify-content: center;
align-items: center;
font-size: 18px;
display: flex;
}
.content {
padding:10px;
position: relative;
}
.a
{
text-decoration:none;
}
.div
{
position: relative;
background: #d4d4d4;
border: 1px solid #555;
border-radius: 5px;
padding: 7px;
margin: 5px;
display: flex;
justify-content: space-around;
vertical-align:center;
}
.divbar
{
position: relative;
background: none;
padding: 0px;
margin: 5px;
display: flex;
vertical-align:center;
}
.bar-in
{
position: absolute;
background: #007aff;
border-radius: 4.5px;
padding: 6px;
margin: -40.6px 0px 0px 5.5px;
height:23.1px;
display: flex;
justify-content: space-around;
vertical-align:center;
width:50%;
}
.bullet
{
position: absolute;
background: #007aff;
padding: 0px;
margin: 26.5px 0px 0px 275px;
width:7px;
height:35px;
vertical-align:center;
z-index:10;
}
.arrow
{
position: relative;
z-index:15;
left:246px;
}
.bar-text
{
z-index:20;
color:#ff0;
}
.icon
{
position: absolute;
left: 100%;
margin: 0px 10px 0px 10px;
top: -2px;
padding: 1px 5px;
}
i.icon {
display:inline-block;
vertical-align:middle;
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
position:relative
}
.simbicon-arrow-dwn {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:36px;
height:36px
}
.simbicon-arrow-dwn-small {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 580'><path d='M 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:16px;
height:16px;
}<!DOCTYPE html> <html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8"> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width"> </head> <body> <div class="navbar"> <div class="left"> <i class="icon simbicon-arrow-dwn" style="left:0px;"></i> </div> <div class="center">Title</div> <div class="right"> <i class="icon simbicon-arrow-dwn" style="left:0px;"></i> </div> </div> <div class="content"> <a href="#"> <div class="div">Here is a svg icon <i class="icon simbicon-arrow-dwn" style="left:10%;"></i> </div> </a> <a href="#"> <div class="div"> <i class="icon simbicon-arrow-dwn" style="left:0px;"></i> Here is another svg icon </div> </a> <a href="#"> <div class="div">Yet another <i class="icon simbicon-arrow-dwn" style="left:10px;"></i> svg icon </div> </a> <br/><br/><br/> <div class="divbar"> <div class="arrow"><i class="icon simbicon-arrow-dwn-small" style="left:10px;"></i></div> <div class="bullet"></div> </div> <div class="div"><b class="bar-text" >This is the bar</b> </div> <div class="bar-in"> </div> </div> </body> </html>
Now you can see how the last bar is just what you showed on the question.
If you say that the bar .bar-in (here in blue) will dynamically change its with and .bullet will change its position accordingly, it will be changed by a script. So, if you make that script to dynamically change the left:246px value of .arrow to proportionally change when the with of .bar-in changes and the **margin: 26.5px 0px 0px 275px; (275px (margin-left)) of .bullet also changes then .arrow will always follow .bullet to any position it takes along the bar.
This is a screen shot of a js file I’m using in an app. As you can see javascript is handling a piece of html and css just to control how and where this elements are shown in the app. If you manage to create such an implementation in your script, or find where it handles the bullet and the target marker if you are using a third party code, then it would be easy for you to simply substitute the default image for the one of your choice. Or even create it on the given case the script is just using a colored div just as I did for the blue .bar-in and .bullet.
The screenshot:
Here the same js is handling an svg which I changed because previously it was a png.
