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
}
]
}
}
};

How to make RTL layout for Highcharts Stock chart?

I have NUXT JS Project installed with "highcharts": "^10.1.0" package. I created three plugins 1. highcharts.js 2. default.js 3. dark.js.
highcharts.js
import Stock from 'highcharts/modules/stock';
if (typeof Highchart === 'object') {
Stock(Highchart);
}
export default ( { app }, inject ) => {
inject('highChart', Highchart);
}
default.js
export default {
colors: [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
symbols: ["circle", "diamond", "square", "triangle", "triangle-down"],
lang: {
loading: "Loading...",
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
shortMonths: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
weekdays: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
decimalPoint: ".",
numericSymbols: ["k", "M", "G", "T", "P", "E"],
resetZoom: "Reset zoom",
resetZoomTitle: "Reset zoom level 1:1",
thousandsSep: " "
},
global: {},
time: { timezoneOffset: 0, useUTC: true },
chart: {
styledMode: false,
borderRadius: 0,
colorCount: 10,
defaultSeriesType: "line",
ignoreHiddenSeries: true,
spacing: [10, 10, 15, 10],
resetZoomButton: {
theme: { zIndex: 6 },
position: { align: "right", x: -10, y: 10 }
},
width: null,
height: null,
borderColor: "#335cad",
backgroundColor: "#ffffff",
plotBorderColor: "#cccccc",
style: {
fontFamily:
'"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
direction: 'rtl'
}
},
title: {
text: "Chart title",
align: "center",
margin: 15,
widthAdjust: -44,
style: {
color: "#333333",
textTransform: "",
fontSize: "1.25rem"
}
},
subtitle: {
text: "",
align: "center",
widthAdjust: -44,
style: {
color: "#909090"
}
},
caption: { margin: 15, text: "", align: "left", verticalAlign: "bottom" },
plotOptions: {
line: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x"
},
area: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x",
threshold: 0
},
spline: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x"
},
areaspline: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
}
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "x",
threshold: 0
},
column: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
x: 0
},
cropThreshold: 50,
opacity: 1,
pointRange: null,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: false,
brightness: 0.1
},
select: {
animation: { duration: 0 },
color: "#cccccc",
borderColor: "#000000"
},
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
borderRadius: 0,
centerInCategory: false,
groupPadding: 0.2,
pointPadding: 0.1,
minPointLength: 0,
startFromThreshold: true,
tooltip: { distance: 6 },
threshold: 0,
borderColor: "#ffffff"
},
bar: {
lineWidth: 2,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
x: 0
},
cropThreshold: 50,
opacity: 1,
pointRange: null,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: false,
brightness: 0.1
},
select: {
animation: { duration: 0 },
color: "#cccccc",
borderColor: "#000000"
},
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
borderRadius: 0,
centerInCategory: false,
groupPadding: 0.2,
pointPadding: 0.1,
minPointLength: 0,
startFromThreshold: true,
tooltip: { distance: 6 },
threshold: 0,
borderColor: "#ffffff"
},
scatter: {
lineWidth: 0,
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: {
enabledThreshold: 2,
lineColor: "#ffffff",
lineWidth: 0,
radius: 4,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
enabled: true,
radiusPlus: 2,
lineWidthPlus: 1
},
select: { fillColor: "#cccccc", lineColor: "#000000", lineWidth: 2 }
},
enabled: true
},
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 }
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: true,
turboThreshold: 1000,
findNearestPointBy: "xy",
jitter: { x: 0, y: 0 },
tooltip: {
headerFormat:
'<span style="color:{point.color}">●</span> <span style="font-size: 10px"> {series.name}</span><br/>',
pointFormat: "x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>"
}
},
pie: {
allowPointSelect: false,
crisp: true,
showCheckbox: false,
animation: { duration: 1000 },
events: {},
marker: null,
point: { events: {} },
dataLabels: {
animation: {},
align: "center",
defer: true,
padding: 5,
style: {
fontSize: "11px",
fontWeight: "bold",
color: "contrast",
textOutline: "1px contrast"
},
verticalAlign: "bottom",
x: 0,
y: 0,
allowOverlap: true,
connectorPadding: 5,
connectorShape: "fixedOffset",
crookDistance: "70%",
distance: 30,
enabled: true,
softConnector: true
},
cropThreshold: 300,
opacity: 1,
pointRange: 0,
softThreshold: true,
states: {
normal: { animation: true },
hover: {
animation: { duration: 50 },
lineWidthPlus: 1,
marker: {},
halo: { size: 10, opacity: 0.25 },
brightness: 0.1
},
select: { animation: { duration: 0 } },
inactive: { animation: { duration: 50 }, opacity: 0.2 }
},
stickyTracking: false,
turboThreshold: 1000,
findNearestPointBy: "x",
center: [null, null],
clip: false,
colorByPoint: true,
ignoreHiddenPoint: true,
inactiveOtherPoints: true,
legendType: "point",
size: null,
showInLegend: false,
slicedOffset: 10,
tooltip: { followPointer: true },
borderColor: "#ffffff",
borderWidth: 1
},
candlestick: {
lineColor: 'black',
upLineColor: 'black', // docs
upColor: 'black'
}
},
labels: { style: { position: "absolute", color: "#333333" } },
legend: {
enabled: true,
rtl: true,
align: "center",
alignColumns: true,
layout: "horizontal",
borderColor: "#999999",
backgroundColor: "#ffffff",
borderRadius: 0,
navigation: { activeColor: "#003399", inactiveColor: "#cccccc" },
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "12px",
fontWeight: "bold",
textOverflow: "ellipsis"
},
itemHoverStyle: { color: "#000000" },
itemHiddenStyle: { color: "#cccccc" },
shadow: false,
itemCheckboxStyle: { position: "absolute", width: "13px", height: "13px" },
squareSymbol: true,
symbolPadding: 5,
verticalAlign: "bottom",
x: 0,
y: 0,
title: { style: { fontWeight: "bold" } }
},
loading: {
labelStyle: { fontWeight: "bold", position: "relative", top: "45%" },
style: {
position: "absolute",
backgroundColor: "#ffffff",
opacity: 0.5,
textAlign: "center"
}
},
tooltip: {
useHTML: true,
outside: true,
split: true,
enabled: true,
animation: true,
borderRadius: 3,
dateTimeLabelFormats: {
millisecond: "%A, %b %e, %H:%M:%S.%L",
second: "%A, %b %e, %H:%M:%S",
minute: "%A, %b %e, %H:%M",
hour: "%A, %b %e, %H:%M",
day: "%A, %b %e, %Y",
week: "Week from %A, %b %e, %Y",
month: "%B %Y",
year: "%Y"
},
footerFormat: "",
padding: 8,
snap: 10,
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
pointFormat:
'<span style="color:{point.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
backgroundColor: "rgba(247,247,247,0.85)",
borderWidth: 1,
shadow: true,
style: {
color: "#333333",
cursor: "default",
fontSize: "12px",
whiteSpace: "nowrap"
}
},
credits: {
enabled: true,
href: "https://www.highcharts.com?credits",
position: { align: "right", x: -10, verticalAlign: "bottom", y: -5 },
style: { cursor: "pointer", color: "#999999", fontSize: "9px" },
text: "Highcharts.com"
},
// It'e needed to set additional options from out of the default theme,
// because Dark theme is adding the new properties not included within
// default theme
xAxis: {
gridLineColor: "#D8D8D8",
labels: {
style: {
color: "#606060"
}
},
lineColor: "#C0D0E0",
minorGridLineColor: "#e0e0e0",
tickColor: "#C0D0E0",
title: {
style: {
color: "#707070"
}
}
},
yAxis: {
gridLineColor: "#D8D8D8",
labels: {
style: {
color: "#606060"
}
},
lineColor: "#C0D0E0",
minorGridLineColor: "#e0e0e0",
tickColor: "#C0D0E0",
tickWidth: 0,
title: {
style: {
color: "#707070"
}
}
},
rangeSelector: {
buttonTheme: {
fill: "#f7f7f7",
stroke: "#000000",
style: {
color: "#000000"
},
states: {
hover: {
fill: "#e6ebf5",
stroke: "#000000",
style: {
color: "black"
}
},
select: {
fill: "#e6ebf5",
stroke: "#000000",
style: {
color: "black"
}
}
}
},
inputBoxBorderColor: "#CCC",
inputStyle: {
backgroundColor: "#fff",
color: "black"
},
labelStyle: {
color: "black"
}
},
};
dark.js
export default {
colors: [
"#2b908f",
"#90ee7e",
"#f45b5b",
"#7798BF",
"#aaeeee",
"#ff0066",
"#eeaaee",
"#55BF3B",
"#DF5353",
"#7798BF",
"#aaeeee"
],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, "#1B1B1B"],
[1, "#1B1B1B"]
]
},
style: {
fontFamily: "'Unica One', sans-serif",
direction: 'rtl'
},
plotBorderColor: "#606063"
},
title: {
style: {
color: "#E0E0E3",
textTransform: "uppercase",
fontSize: "1.25rem"
}
},
subtitle: {
style: {
color: "#E0E0E3",
textTransform: "uppercase"
}
},
xAxis: {
gridLineColor: "#707073",
labels: {
style: {
color: "#E0E0E3"
}
},
lineColor: "#707073",
minorGridLineColor: "#505053",
tickColor: "#707073",
title: {
style: {
color: "#A0A0A3"
}
}
},
yAxis: {
gridLineColor: "#707073",
labels: {
style: {
color: "#E0E0E3"
}
},
lineColor: "#707073",
minorGridLineColor: "#505053",
tickColor: "#707073",
tickWidth: 1,
title: {
style: {
color: "#A0A0A3"
}
}
},
tooltip: {
useHTML: true,
outside: true,
split: true,
backgroundColor: "rgba(0, 0, 0, 0.85)",
style: {
color: "#F0F0F0"
}
},
plotOptions: {
series: {
dataLabels: {
color: "#F0F0F3",
style: {
fontSize: "13px"
}
},
marker: {
lineColor: "#333"
}
},
boxplot: {
fillColor: "#505053"
},
candlestick: {
lineColor: "white",
upLineColor: 'white',
upColor: 'white'
},
errorbar: {
color: "white"
}
},
legend: {
rtl: true,
backgroundColor: "rgba(0, 0, 0, 0.5)",
itemStyle: {
color: "#E0E0E3"
},
itemHoverStyle: {
color: "#FFF"
},
itemHiddenStyle: {
color: "#606063"
},
title: {
style: {
color: "#C0C0C0"
}
}
},
credits: {
style: {
color: "#666"
}
},
labels: {
style: {
color: "#707073"
}
},
drilldown: {
activeAxisLabelStyle: {
color: "#F0F0F3"
},
activeDataLabelStyle: {
color: "#F0F0F3"
}
},
navigation: {
buttonOptions: {
symbolStroke: "#DDDDDD",
theme: {
fill: "#505053"
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: "#505053",
stroke: "#000000",
style: {
color: "#CCC"
},
states: {
hover: {
fill: "#707073",
stroke: "#000000",
style: {
color: "white"
}
},
select: {
fill: "#000003",
stroke: "#000000",
style: {
color: "white"
}
}
}
},
inputBoxBorderColor: "#505053",
inputStyle: {
backgroundColor: "#333",
color: "silver"
},
labelStyle: {
color: "silver"
}
},
navigator: {
handles: {
backgroundColor: "#666",
borderColor: "#AAA"
},
outlineColor: "#CCC",
maskFill: "rgba(255,255,255,0.1)",
series: {
color: "#7798BF",
lineColor: "#A6C7ED"
},
xAxis: {
gridLineColor: "#505053"
}
},
scrollbar: {
barBackgroundColor: "#808083",
barBorderColor: "#808083",
buttonArrowColor: "#CCC",
buttonBackgroundColor: "#606063",
buttonBorderColor: "#606063",
rifleColor: "#FFF",
trackBackgroundColor: "#404043",
trackBorderColor: "#404043"
}
};
Page _typ/_uisin/_wkn/index.vue
<div id="container" ref="container" style="width: 100%; height: 400px">
<script>
import darkTheme from '../../../../plugins/dark'
import defaultTheme from "../../../../plugins/default";
export default {
data() {
return {
chart: null,
chartOptions: {
rangeSelector: {
selected: 4,
allButtonsEnabled: true
},
title: {
text: null,
// align: 'left'
},
subtitle: {
text: 'Barriere=110 Euro, Bonuslevel=160 Euro',
// align: 'left'
},
navigator: {
enabled: true
},
yAxis: [
{
labels: {
align: 'left'
},
height: "80%",
resize: {
enabled: true,
},
},
{
labels: {
align: 'left'
},
top: "80%",
height: "20%",
offset: 0,
},
],
credits: {
enabled: false
},
series: [
{
type: 'candlestick',
color: '#000',
upColor: '#fff',
name: 'Apple',
data: null
},
{
name: null,
data: null
}
]
}
}
},
if (this.$refs.container) {
this.chart = this.$highChart.stockChart("container", this.chartOptions);
}
</script>
here in this chart i want make it RTL support. so how can i do that? i implement all the solution of search.
Thank You in advance.

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 to slide in highcharts

I want to slide in Highcharts view , Now i just slide from 'rangeSelector'.This are my code , please help me . I don't know how to set configurations ----------------- The data are too many , but i think the data is no problem , I think the problem is my configuration ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
this.Highcharts = Highcharts.stockChart(`${this.wrapId}`,
{
chart: {
// zoomType: "x"
plotBackgroundColor: "rgb(255, 255, 255)",
backgroundColor: "rgb(255, 255, 255)",
events: {
redraw: function() {
let series = this.series[0];
},
render: function() {}
}
},
title: {
text: ""
},
subtitle: {},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
second: '%m/%d %H:%M',
minute: '%m/%d %H:%M',
hour: '%m/%d %H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
// tickInterval: 60 * 1000, // 刻度线 1分种
lineColor: "rgb(230, 230, 230)",
lineWidth: 2,
gridLineWidth: 1,
gridZIndex: 1,
tickPosition: "outside", // 刻度
tickColor: "transparent", // 刻度颜色
gridLineColor: "transparent",
range:3600000,
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
// 下导航
enabled: true
},
scrollbar: {
enabled: true
},
// 数据提示框
tooltip: {
enabled: true,
backgroundColor: "white",
borderColor: "white",
style: {
color: "black",
zIndex:5,
}
},
yAxis: [
{
top: "0%",
height: "50%",
title: {
text: ""
},
endOnTick: true, // 强制结束于Y轴
// markers:false,
crosshair: true, // 横轴
dashStyle: "shortdot",
crosshair: {
width: 1.5,
color: "white",
dashStyle: "dash"
},
plotLines: [
{
width: 2,
color: "rgb(239, 197, 114)",
value: this.startValue,
dashStyle: "Dash",
label: {
text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
this.startValue
}</span>`,
align: "right",
useHTML: true,
y: -5,
x: 0
},
zIndex: 3
}
],
gridLineWidth: 1,
gridZIndex: 1,
gridLineColor: "rgb(230, 230, 230)",
opposite: true
},
{
top: "56%",
height: "42%",
tickAmount:4,
}
],
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba")
]
]
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
candlestick: {
upLineColor: "transparent", // docs
upColor: "rgb(235, 106, 101)",
color: "rgb(121, 170, 111)"
},
macd: {
color: "rgb(199, 103, 103)",
marker: {
enabled: false,
lineColor: "rgb(39, 40, 61)",
states: {
hover: {
enabled: false
}
}
}
}
},
series: [
{
name:"MA",
type: "candlestick",
id: "candlestick",
data: this.data,
fillColor: "",
lineColor: "",
allowPointSelect: false,
index: 4,
colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
events:{
drag(a){
}
}
},
{
name:"MA1",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA1,
},
{
name:"MA2",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA2,
},
{
name:"MA3",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA3,
},
{
name:"MA4",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA4,
},
{
// Two different zones:
type: 'macd',
yAxis: 1,
linkedTo: 'candlestick',
},
// {
// type: "macd",
// yAxis: 1,
// data:this.data,
// linkedTo: 'candlestick',
// // allowPointSelect: false,
// index: 4
// },
{
name:"DEA",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DEA,
},
{
name:"DIF",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DIF,
},
]
})

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}

You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>