We Keep Coding

Apexcharts radialbar label background

I'm trying to do a chart created on Figma in Angular 12 with apexcharts.
With the code, I can do something like the below comparison.
Figma Design
Angular 12 with Apexcharts
How can add the triangle pointer/marker on apexcharts? (Its possible made the pointer on apexcharts radialBar?)
This is my Apexcharts code
this.chartOptions = {
series: [70],
chart: {
height: 240,
type: "radialBar",
toolbar: {
show: true
},
},
plotOptions: {
radialBar: {
inverseOrder: false,
startAngle: -180,
endAngle: 180,
hollow: {
margin: 20,
size: '65%',
background: '#fff',
position: 'front',
dropShadow: {
enabled: true,
top: 3,
left: 0,
blur: 10,
opacity: 0.1
}
},
track: {
background: '#F8F8F8',
strokeWidth: '100%',
margin: 0, // margin is in pixels
},
dataLabels: {
show: true,
value: {
offsetY:-7,
color: '#000000',
fontSize: '25px',
show: true,
}
}
}
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [
{
offset: 0,
color: "#FFBB0D",
opacity: 1
},
{
offset: 40,
color: "#FFBB0D",
opacity: 1
},
{
offset: 60,
color: "#FF720D",
opacity: 1
},
{
offset: 100,
color: "#FF720D",
opacity: 1
}
]
}
}
};

i am making a dynamic chart bar in js

this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic
(function($) {
// "use strict";
var dlabChartlist = function()
{
var screenWidth = $(window).width();
let draw = Chart.controllers.line.__super__.draw;
var chartBar = function()
{
var options =
{
series: [
{
name: 'Project',
data: [50, 58, 70, 40, 10, 70, 20],
// radius: 12,
},
// {
// name: 'Cycling',
// data: [80, 40, 55, 20, 45, 30, 80]
// },
],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '57%',
endingShape: "rounded",
borderRadius: 12,
},
},
states: {
hover: {
filter: 'none',
}
},
colors:['#FFA26D'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 10,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 4,
curve: 'smooth',
lineCap: 'round',
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
position: 'bottom',
categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'white',
type: "vertical",
shadeIntensity: 0.2,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 50],
colorStops: []
}
},
tooltip: {
y: {
formatter: function (val) {
return val + " Days"
}
}
},
};
var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
chartBar1.render();
}
And this is where im showing index.html where i m showing this chart
<div class="tab-pane fade active show" id="monthly">
<div id="chartBar" class="chartBar"></div>
</div>
I don't have enough knowledge about js and i want this chart bar dynamic.....
and i m using mysql
how can i convert it into dynamic chart

How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?

I have made the following gantt chart using Highcharts Gantt chart. However, i want a part of the line to be dashed instead of solid. Something like this -
However i'm unable to make it dashed. It always appears to be solid. How do i make it dashed and that too, only a certain part of it ?
The following is my current chart option. 'this.series' is the data i'm providing to the chart.
{
chart: {
type: 'gantt',
title: {
text: 'Gantt Chart with Progress Indicators'
},
xAxis: [{
min: Date.UTC(2016, 1, 1),
max: Date.UTC(2016, 1, 1) + this.day * 365 * 6,
// max: Date.UTC(2039, 12, 31),
tickInterval: this.day * 365, // 1 year
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -12,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
showFull: false
},
gridLineWidth: 1,
labels: {
align: 'center',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
minWidth: '160px',
fontWeight: 'bold'
// textOverflow: 'ellipsis'
}
},
}],
yAxis: {
type: 'category',
grid: {
cellHeight: 44,
columns: [{
title: {
text: 'Study ID',
style: {
fontFamily: 'Helvetica',
fontSize: 13,
color: '#333333',
width: '160px',
fontWeight: 'bold'
}
},
labels: {
format: '{point.nct_id}',
}
// categories: this.map(this.series, function (s) {
// return s.name;
// })
}],
},
min: 0,
max: 10,
scrollbar: {
enabled: true,
barBorderRadius: 4,
height: 9,
minWidth: 9,
barBackgroundColor: '#333',
trackBackgroundColor: '#F2F2F2',
margin: -10,
buttonBackgroundColor: 'none',
buttonBorderWidth: 0,
buttonArrowColor: 'none',
buttonBorderRadius: 0,
},
labels: {
style: {
fontFamily: 'Helvetica',
fontSize: 14,
color: '#007BFF',
minWidth: '160px',
textOverflow: 'ellipsis'
}
},
},
plotOptions: {
gantt: {
},
},
series: [{
name: 'Project 1',
type: 'gantt',
data: this.series,
dataLabels: [{
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-left: -12px; background: #0E4A91;"></div>',
useHTML: true,
align: 'left'
}, {
enabled: true,
format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-right: -12px; background: #0E4A91"></div>',
useHTML: true,
align: 'right',
style: {
overflow: 'hidden'
}
}],
}],
credits: {
enabled: false
}
}
It would be a great help if someone could help me out with this. Thanks!

You can use line series with zones:
series: [{
name: 'Project 1',
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 28)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 29)
}],
data: [{
x: Date.UTC(2014, 10, 27),
y: 0
}, {
x: Date.UTC(2014, 10, 29),
y: 0
}]
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/b7xdcjpt/
API Reference: https://api.highcharts.com/highcharts/series.line.zones

Highcharts Gauge: Adding Icons

I'm trying to add icons in dataLabels, I successfully added some HTML like this return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>';, but now I want to add icons instead, I'm using **Ionicons*. Here's the code:
var chart=Highcharts.chart(id, {
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
exporting: { enabled: false },
title: {
text: ''
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
from: 0,
to: partial+rejected,
backgroundColor: '#f55',
innerRadius: '85%',
outerRadius: '50%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: parseInt(val),
tickInterval: 1,
tickPosition: 'outside',
minorTickColor: '#FF0000',
tickColor: '#FF0000',
tickWidth: 2,
tickLength: 10,
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
title:{text:'Total: '+val,style:{ color:"#333" }},
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: delivered,
color: '#21A121',
thickness: '15%',
id: 'plot-band-1'
}]
}],
series: [{
name: 'Managed',
data: [{
id: 'deliver',
y: parseInt(total),
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}],
dataLabels: {
formatter: function () {
var total = this.y;
return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
},
backgroundColor: {
linearGradient: {
x1: 10,
y1: 10,
x2: 10,
y2: 11
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' '
}
}]
});
The part I'm trying to get right is at dataLabels, if there's any information you may need to understand what I'm trying to achieve, just ask me, thanks in advance

Simply, get Ionicons CSS file (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css) and return adequate icon in dataLabels.formatter function. You need to remember that the property useHTML must be set to true.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter
Example:
http://jsfiddle.net/h0xLzv8h/

Highchart bar scaling

I'd like to show data between 0 and 100%. The bar chart have 160px of width and I'd like to see just bar without any titles/legends.
I got the data in range bitween 0 and x (for example from 0 till 700), and max value can be changed.
When max value less then 160 the bar looks correctly. But when max value more than 160 a chars scales current bar value incorectly.
Desirable result
http://jsfiddle.net/dvasuta/H6SJE/2/
What I have now
http://jsfiddle.net/dvasuta/sXAeh/2/
$(function () {
$('#container').highcharts({
credits: {
enabled: false,
},
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 1,
marginTop: 1,
marginLeft: 1,
marginRight: 1,
borderRadius: 0,
borderWidth: 1,
borderColor: '#c5c6c7',
backgroundColor: 0,
height: 22,
width:160
},
title: {
text: null
},
xAxis: {
tickWidth: 0,
lineWidth: 0,
gridLineWidth: 0,
categories: 0,
labels: {
enabled: false
}
},
yAxis: {
tickWidth: 0,
lineWidth: 0,
gridLineWidth: 0,
min: 0,
max: 2500,
title: {
text: null
},
labels: {
enabled: false
}
},
tooltip: {
enabled: false,
formatter: function () {
return '';
}
},
legend: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function () {
return '';
},
y: 0,
x: 0,
color: '#ff0',
style: {
fontSize: '18px',
fontFamily: 'bold Helvetica,Arial,sans-serif'
}
}
},
series: {
allowPointSelect: false,
enableMouseTracking: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
borderRadius: 0
}
},
series: [{
shadow: true,
data: [2482],
color: {
linearGradient: [20, 20, 0, 20],
stops: [
[0, '#B6D22D'],
[1, '#5C9135']
]
}
}]
});
});
It seems the issue in chart.width parameter. But how can I set a chart width?

I think the parameter you need to try is 'endOnTick' on the y-axis:
endOnTick:false,
http://jsfiddle.net/46nMs/
http://api.highcharts.com/highcharts#yAxis.endOnTick
Also, you may want to turn of exporting (this is just a visual tweak, and doesn't affect the scaling of the bar).

try this LINK ChaRT LINK
1. Disabled exporting
2. borderWidth = 0