We Keep Coding

t.substring is not a function in ApexCharts

Porridge everyone, I got a bug in ApexCharts. Who knows what this is wrong? Thanks!
My Code:
// Option Chart
var options = {
series:
[
{
name: 'Operating',
data: [1785, 1661, 1663, 1653, 1882, 1725, 6153, 1153, 6153, 6153, 6153, 1653, 1153, 1663, 1661]
}, {
name: 'Stopping',
data: [4072, 0, 0, 0, 248, 2534, 8533, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'Error',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},{
name: 'No Sign',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
],
chart: {
type: 'bar',
height: heightChart,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
labels: {
style: {
colors: [],
fontSize: '15px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
}
},
},
yaxis: {
labels: {
style: {
colors: [],
fontSize: '15px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
}
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
This Is Error:
I tried to find out about this error, mostly due to data errors. But my data is right. When we replace 0 to 1 this error disappears.
And after creating the plot option, the graph generated an error:
plotOptions: {
bar: {
columnWidth: '60%',
colors: {
ranges: [{
from: 0,
to: 0,
color: ['#0000']
}],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0,
},
}
},

Your code runs fine (produces the result as shown below) and generates no errors on my side.
Can you check which version of ApexCharts are you using?

Highcharts - Gauge chart data label not positioning correctly

I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.
Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.
Here's a fiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
Would appreciate any help, thanks!

You should adjust the image position via x, y properties.
x: 0,
y: 30,
example: https://jsfiddle.net/ptezqnbf/1/
or even better, use renderer.image and control the position directly.
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
example: https://jsfiddle.net/tpp1gdau/1/

Change the style of Highchart stacked colum chart

I plot a stacked column Highchart. The chart is working fine but there is some style issues. The Y-axis names are showing above the chart so the subtitle is not showing I need to show the Y-axis names below.How can I change this?Thanks in advance for help...
Here is my code
<script type="text/javascript">
$(function () {
$('#chart_div').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Material Vs Subcategory'
},
subtitle: {
text: 'Source: www.test.com'
},
xAxis: {
categories: ['Air Filtration','Clothing','Sporting Goods','Home Furnishings','Paint','Storage','Toys and Games']
},
yAxis: {
min: 0,
title: {
text: 'Number of Products'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Unclassifiable',
data: [0, 1, 0, 0, 1, 0, 0]
},{
name: 'Aluminium',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Calcium',
data: [0, 0, 0, 1, 0, 0, 0]
},{
name: 'Copper',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Gold',
data: [0, 1, 0, 0, 1, 1, 0]
},{
name: 'Iron',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Platinum',
data: [0, 0, 0, 0, 1, 0, 1]
},{
name: 'Silver',
data: [0, 3, 3, 0, 0, 0, 0]
},{
name: 'Steel',
data: [1, 0, 0, 1, 0, 0, 0]
},{
name: 'Unknown',
data: [0, 1, 0, 0, 1, 0, 0]
}]
});
});
</script>

Taking out the "Floating" and x/y positions makes it look a little cleaner too:
legend: {
verticalAlign: 'bottom',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
http://jsfiddle.net/38Mkf/1/

Is that you want verticalAlign: bottom on legend part?
legend: {
align: 'right',
x: -70,
verticalAlign: 'bottom',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
http://jsfiddle.net/38Mkf/

Remove extra chart area on Highcharts Gantt chart

When adding a large number of series to the example Gantt configuration (http://jsfiddle.net/r6emu) additional height is added to the top and bottom of the chart area. Is there any way to prevent the additional area/lines?
Example provided here:
http://jsfiddle.net/r6emu/1677/
// Define tasks
var tasks = [{
name: 'Sleep',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 0),
to: Date.UTC(0, 0, 0, 6)
}, {
from: Date.UTC(0, 0, 0, 22),
to: Date.UTC(0, 0, 0, 24)
}]
}, {
name: 'Family time',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 6),
to: Date.UTC(0, 0, 0, 16)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 22)
}]
}, {
name: 'Eat',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 7),
to: Date.UTC(0, 0, 0, 8),
label: 'Breakfast'
}, {
from: Date.UTC(0, 0, 0, 12),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 17),
label: 'Dinner'
}, {
from: Date.UTC(0, 0, 0, 20, 30),
to: Date.UTC(0, 0, 0, 21)
}]
},
[... many series removed ...]
{
name: 'Eat',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 7),
to: Date.UTC(0, 0, 0, 8),
label: 'Breakfast'
}, {
from: Date.UTC(0, 0, 0, 12),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 17),
label: 'Dinner'
}, {
from: Date.UTC(0, 0, 0, 20, 30),
to: Date.UTC(0, 0, 0, 21)
}]
}, {
name: 'Work',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 8),
to: Date.UTC(0, 0, 0, 16)
}]
}];
// Define milestones
var milestones = [{
name: 'Get to bed',
time: Date.UTC(0, 0, 0, 22),
task: 1,
marker: {
symbol: 'triangle',
lineWidth: 1,
lineColor: 'black',
radius: 8
}
}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// restructure the milestones
$.each(milestones, function(i, milestone) {
var item = Highcharts.extend(milestone, {
data: [[
milestone.time,
milestone.task
]],
type: 'scatter'
});
series.push(item);
});
console.log(series);
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Daily activities'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Activity'
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.options.from) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});

It looks like you are forcing this area by having y axis padding and the lines by having a tick interval of 1.
yAxis: {
tickInterval: 1,
..
// minPadding: 0.2,
// maxPadding: 0.2
Going back to the default padding gives pretty good results, but the default of .01 may still be too much if your chart grows taller.

Highcharts Gauge

I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});

try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want

It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.