Issues with ApexChart.js - javascript

I have 3 issues Please refer to this codepen and this picture
I try to disable mouse-hover behavior for donut chart by using config, following this #issue322 but it's not working. Hover still working whenever mouse on top of something
How to make labels at the center to fit in white space only? not overlapping with the graph? I try to use \n and <br> but still can't make it as 2 lines. \n only turn into white space.
How to limit data label percentage to no decimal?
Is it possible to put datalabel on the right of its segment?
<body>
<div id="chart"></div>
<script>
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut",
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return opts.w.config.series[opts.seriesIndex] + " : " + val;
},
},
plotOptions: {
pie: {
startAngle: 0,
expandOnClick: true,
offsetX: 0,
offsetY: 0,
customScale: 1,
dataLabels: {
offset: 0,
minAngleToShowLabel: 10,
},
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: true,
fontSize: "22px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: undefined,
offsetY: -10,
formatter: function (val) {
return val;
},
},
value: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 400,
color: undefined,
offsetY: 16,
formatter: function (val) {
return val;
},
},
total: {
show: true,
showAlways: false,
label: "Total Accumulated Mandate",
fontSize: "22px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: "#373d3f",
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b;
}, 0);
},
},
},
},
},
},
legend: {
show: false,
},
// responsive: [{
// enabled: false,
// breakpoint: 980,
// options: {
// chart: {
// width: 500
// },
// legend: {
// show: false
// }
// }
// }]
states: {
hover: {
filter: {
type: "none",
},
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>

For no 3, just simply use parseInt(val)

I have solved three issues other than first one: Try this code
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut",
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
/* Format labels here */
return opts.w.config.series[opts.seriesIndex];
},
},
plotOptions: {
pie: {
startAngle: 0,
expandOnClick: true,
offsetX: 0,
offsetY: 0,
customScale: 1,
dataLabels: {
offset: 0,
minAngleToShowLabel: 10,
},
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
color: undefined,
offsetY: 0,
formatter: function (val) {
return val;
},
},
value: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 400,
color: undefined,
offsetY: 16,
formatter: function (val) {
return val
},
},
total: {
show: true,
showAlways: false,
label: "Total Accumulated Mandate",
/* Set fontsize here and accordingly for responsiveness */
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: "#373d3f",
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b;
}, 0);
},
},
},
},
},
},
legend: {
show: true
},
// responsive: [{
// enabled: false,
// breakpoint: 980,
// options: {
// chart: {
// width: 500
// },
// legend: {
// show: false
// }
// }
// }]
states: {
hover: {
filter: {
type: "none",
},
},
},
};

Related

apexcharts "Horizontal bars are not supported in mixed/combo chart." warning

I have an apexchart in Vue 3 with the following configuration;
chart: {
fontFamily: "inherit",
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
stacked: true,
horizontal: true,
endingShape: "rounded",
columnWidth: ["24%"],
barHeight: "80%"
}
},
legend: {
position: "top",
horizontalAlign: "right",
offsetX: -10
},
dataLabels: {
enabled: true,
style: {
fontSize: "12px",
fontWeight: 500
}
},
stroke: {
curve: "smooth",
show: true,
width: 1,
colors: ["transparent"]
},
xaxis: {
categories: [] as Array<string>,
axisBorder: {
show: false
},
axisTicks: {
show: true
},
labels: {
style: {
colors: labelColor,
fontSize: "12px"
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: "12px"
},
maxWidth: "100px"
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: "none",
value: 0
}
},
hover: {
filter: {
type: "none",
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: "none",
value: 0
}
}
},
tooltip: {
followCursor: true,
shared: true,
intersect: false,
style: {
fontSize: "12px"
},
x: {
formatter: function (val) {
return val;
}
},
y: {
formatter: function (val) {
return val;
}
}
},
colors: [baseColor, secondaryColor, baseLightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
}
Apexchart declaration;
<apexchart
type="bar"
:options="options"
:series="[]"
ref="chart"
height="3000px"
></apexchart>
I get the following warning in the console;
The setting works, since if I remove that option the bar chart becomes vertical, so obviously I don't want to remove it. How do I get rid of this console warning?

HIGHCHARTS - Value of Columns Based on previous Column Value

I got some issue using Highcharts.
I need to draw the height of third column "C" based on values of the column "B"
(As default the draw of height at column "C" is based on Column "A")
I created a simple example here
$('#container').each(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'A',
'B',
'C'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.val}</b> ',
shared: true
},
legend: {
enabled: true
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '%';
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:100, val: 2111, color: '#199ED8' },
{ y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
{ y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});
I'm working with Julio in this case, and we Solve it.
Resolution: http://jsfiddle.net/JVNjs/1203/
$('#container').each(function () {
var publico = 2111;
var abordados = 748;
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'Público',
'Abordados',
'Conversão'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.y}</b> ',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if(this.x == 'Conversão'){
return Math.round(this.y / abordados * 100, 0) + '%';
}else{
return Math.round(this.y / publico * 100, 0) + '%';
}
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:publico, color: '#199ED8' },
{ y:abordados, color: '#6CF' },
{ y:433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
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')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

some of dataLabels not showing in stacked column Highchart

I built a stacked column chart using Highcharts, but there is a problem with dataLabels. Some of the data labels cannot be displayed.
I have created a JSFiddle: http://jsfiddle.net/samsularifin/7gf787vL/1/
This my Javascript code:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Need help!
Highcharts thinks that these data labels are too close to show them all.
You can remedy this by allowing overlap, using this code (JSFiddle):
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
// ...
}
}
}
Or making it less likely to occur by reducing the padding (JSFiddle):
plotOptions: {
series: {
dataLabels: {
padding: 0
// ...
}
}
}

highcharts- php/mysql data fetch

i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :
[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]
my code for highchart is :
var chartOptions = {
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'line',
backgroundColor: null,
plotBackgroundColor: null,
borderRadius:20,
plotShadow: false,
events: {
load: function() {
// event.exporting.buttons.infoButton.symbolX=5;
// event.exporting.buttons.infoButton.symbolY=2;
// info_img=0;
// this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add();
}
},
style: {
zIndex: 1
},
marginRight:30
},
title: {
text: 'hello',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
xAxis: {
type:'datetime',
title: {
text: null
}
},
yAxis: {
title: {
text: 'nothing is coming',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
min: 0.0,
},
credits: {
enabled: true,
position: {
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: -3
},
href: "http://www.interscapetech.com",
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '9px'
},
text: "(c)1997- Interscape Technologies Inc. All rights reserved."
},
/*labels:{
items: [{
html: "TM",
style: {
fontSize:'8px',
left: '330px',
top: '140px'
}
}],
style: {
color: 'grey'
}
},*/
lang:{
downloadButtonTitle:'Download Chart',
printButtonTitle :'Print Chart',
infoButtonTitle:'Chart Information',
switchButtonTitle:'Click to Enlarge'
// switchButtonTitle:'Switch to Bar Chart'
},
navigation:{
buttonOptions:{
align:'right',
verticalAlign:'middle',
height:15,
symbolFill: '#4572A7',
hoverSymbolFill: '#768F3E',
hoverBorderColor:'#92A8CD',
borderColor:'#3D96AE',
backgroundColor:'white',
borderRadius:5,
borderWidth:2,
width:20,
symbolX:10,
symbolY:8,
symbolSize:10
}
},
subtitle: {
text: '',
align:'left',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none',
color: 'white'
},
x:3, //-165 if center
y:12
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
zindex:1
},
series:[{
zindex:1
}]
}
,
tooltip: {
formatter: function() {
var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
var s = '<b>'+ ctime +'</b>';
$.each(this.points, function(i, point) {
var result=Math.round(point.y*10)/10;
s += '<br/>'+ point.series.name +': '+result;
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
legend: {
itemStyle: {
fontFamily: 'Arial',
fontSize: '12px',
textShadow: 'none'
},
enabled: true
// symbolPadding: 10
},
series: []
};
$(document).ready(function()
{
var url='highchars_test2.php';
alert('helo');
$.getJSON(url, function(seriesData){
$(seriesData).each(function(i, pdata){
console.log();
if(i==(seriesData.length-1) || i==(seriesData.length-2))
{}
else
{
alert(pdata['data']);
chartOptions.series.push(pdata);
}
});
chart = new Highcharts.Chart(chartOptions);
});
});
cannot create the chart.. plz help..
in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/
Seems like in series a, the opening square bracket is missing before the data array.

Categories