I'm facing this error when I'm trying to add highchart in extjs panel:
Uncaught TypeError: Cannot read property 'chart' of undefined in highchart.js
testing.js
var chartObject = new Chart.ux.HighChart({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
error on highchart.js:275
https://github.com/JoeKuan/Highcharts_ExtJs_4/blob/master/Chart/ux/HighChart.js
Define your chart configuration in chartConfig:
chartConfig : {
chart : {
// ...
},
title : {
text : '....',
x : -20 //center
},
subtitle : {
text : '....',
x : -20
},
xAxis : [{
//... and so on
Look at this example.
You can download highchart.zip file in this url http://www.highcharts.com/download
In this zip file no errors in highcharts.js.
EDIT:
You can also use files from http://code.highcharts.com
Related
I'm using ApexCharts with vue3 (Composition API). I try to set the series dynamically via a reactive variable. Everything works fine until a dataset is empty - in the sense of its values being 0.
This is the general stub:
<template>
...
<apexchart width="100%" height="400" type="bar" :options="orderOptions" :series="orderSeries" ref="orderChart"></apexchart>
...
</template>
<script setup>
...
const orderSeries = ref([
{
name: 'Orders',
data: []
}
]);
const orderOptions = ref({
xaxis: {
type: 'datetime'
},
yaxis: {
min: 0,
labels: {
formatter: val => val.toFixed(0)
}
},
dataLabels: {
enabled: false
},
markers: {
size: 7,
hover: {
size: 10
}
},
plotOptions: {
bar: {
borderRadius: 4,
borderRadiusApplication: 'end',
columnWidth: '90%'
}
},
title: {
text: 'Orders',
style: {
fontSize: '20px'
}
}
});
...
</script>
This works fine:
orderSeries.value[0].data = [{ x: '2022-03', y: 2 }]
But this:
orderSeries.value[0].data = [{ x: '2022-03', y: 0 }]
Gives me following error:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
at s2 (apexcharts.common.js:10:11991)
...
As long as there is at least one element with a y value different than 0, it will work, but as soon as all y-values are 0, it throws this error.
Can anyone tell me what's wrong with that code?
I am facing problem in inserting a newline character in xAxes labels with chart Js.
Below is the sample code used for formatting xAxes labels
"scales": {
"xAxes": [{
"type" : 'time',
"display": true,
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}]
}
With the above code, the xAxes labels looks like 13:10 - 2022/02/01.
But, I want to be like below:
For multiline labels you will need to proide an array for the label in which each entry is its own line. This can be achieved with the tick callback:
function newDate(milis) {
return moment().add(milis, 'ms');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets: [{
label: "My First dataset",
data: [1, 3, 4, 2, 1, 4, 2],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (tick) => (tick.split('-'))
},
type: 'time',
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
I am trying to use spline area chart of apex chart in my vue js application , and extracting date in the format of timestamp from Firestore in created part of the application and is to be shown in the x axis but x axis in not displaying the timestamp and giving error .
here is the code
export default {
data() {
return {
options : { year: "numeric", month: "numeric",
day: "numeric" },
timestamp:[],
RecruiterChart: {
series: [{
name: 'Total Jobs Posted',
data: [11, 32, 45, 32, 34, 52, 41]
}, {
name: 'Applied Candidates',
data: [31, 40, 28, 51, 42, 109, 100]
}],
chartOptions: {
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors: themeColors,
xaxis: {
type: 'datetime',
categories: []
},
tooltip: {
x: {
format: 'dd/MM/yyyy'
},
}
}
},
}
},
components: {
VueApexCharts
},
created(){
const thisIns = this;
var u= firebase.auth().currentUser
let Ref=firebase.firestore().collection("Recruiter").doc(u.uid).collection("Jobs")
Ref.orderBy("timestamp", "desc").onSnapshot(function(snapshot){
$.each(snapshot.docChanges(), function(){
var change= this
if(change.type==="added"){
var ab = change.doc.data().timestamp.toDate().toLocaleString("en-CH", thisIns.options)
thisIns.time.push(ab)
thisIns.RecruiterChart.chartOptions.xaxis.categories.push(
ab
)
console.log( thisIns.RecruiterChart.chartOptions.xaxis.categories)
}
})
})
console.log(thisIns.RecruiterChart.chartOptions.xaxis.categories)
},
}
but the graph is giving error
Error: attribute cx: Expected length, "NaN".
I have an Apex Chart with multiple lines, I would like to fill the area between each line with a specific colour. Is that possible?
I searched the documentation and it mentions the "fill" option which only seems to fill everything below a line and furthermore doesn't seem to work at all if I try to add it to my line chart.
Options:
const options = {
chart: {
type: 'line'
},
colors: ["#000000", "#115F66", "#AEC6C8", "#EE7E66", "#115F66", "#AEC6C8"],
xaxis: {
type: 'datetime',
categories: xLabels,
tickAmount: xLabels.length,
},
yaxis: {
decimalsInFloat: 0,
min: 0,
},
legend: {
show: false,
},
series: [
{
name: 'Main',
data: this.plotting_data.historicalData,
},
{
name: 'First Lower Bound',
data: this.plotting_data.lowerPred1,
},
{
name: 'Second Lower Bound',
data: this.plotting_data.lowerPred2,
},
{
name: 'Middle',
data: this.plotting_data.prediction,
},
{
name: 'First Upper Bound',
data: this.plotting_data.upperPred1,
},
{
name: 'Second Upper Bound',
data: this.plotting_data.upperPred2,
},
],
}
Range Area Charts are currently not supported in ApexCharts (as of v3.8.5).
I am trying to connect a RallyChart using the type specifier set to pie with a Rally.data.custom.Store. When the RallyChart has the type set to column or is blank, the data shows correctly. When the type is set to pie, I get a pie with all 0%s returned.
Here's what my store looks like:
var myStore = Ext.create('Rally.data.custom.Store', {
data: mySeries,
fields: [
{ name: 'WorkItems', type: 'string' },
{ name: 'Count', type: 'int' }
]
});
Here's what my chart configuration function looks like:
_buildChart: function(myStore) {
this.myChart = Ext.create('Rally.ui.chart.Chart', {
height: 400,
store: myStore,
series: [{
type: 'pie',
name: 'Count',
dataIndex: 'Count'
}],
xField: 'WorkItems',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
this.add(this.myChart);
}
My data incoming looks like:
['Defects', 4],
['Feature A', 4]
['Feature B', 4]
Any ideas why column charts can show it, but pie cannot?
I bet this is a bug in the 2.0p5 version of the chart. We just released version 2.0rc1 of the SDK which includes a better version of the chart. The following code example shows how to create a pie with your data and Rally.ui.chart.Chart in 2.0rc1:
//from inside your app
this.add({
xtype: 'rallychart',
height: 400,
chartData: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Defects', 4], ['Feature A', 4], ['Feature B', 4]
]
}]
},
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
xAxis: {},//must specify empty x-axis due to bug
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
Note it is no longer necessary to create an intermediate store to pass to the chart- you can simply pass in your series as part of the chartData config.