We Keep Coding

ApexChart Column on top of other columns

I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.
var options777 = {
chart: {
id: 'test',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Eligibility',
data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
}],
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
tickPlacement: 'on',
type: 'datetime'
},
yaxis: {
title: {
text: 'Eligibility',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
};
var chart777 = new ApexCharts(
document.querySelector("#myChart"),
options777
);
chart777.render();
When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another?

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,
},
]
})

Chart.js - how to make proportional intervals on X axis on line chart

I'm using Chart.js to draw the line chart with 6 points. That points are:
x: 140, y: null,
x: 150.5, y: 3500,
x: 886.35, y: 3500,
x: 1617.2, y: 0,
x: 2348.05, y: 0
x: 2583, y: null
As one can see, the intervals between x0 and x1 (and also x4-x5) are much smaller than x1-x2-x3-x4. But on the chart they are being drawn like they are equal:
I would rather expect, that the gap between x0 and x1 will be much shorter than between x1 and x2. Can it be done some way?
Code snippet:
var chart = new Chart(document.getElementById("myChart1"), {
type: 'line',
data: {
labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
datasets: [{
label: 'My chart',
spanGaps: true,
lineTension: 0,
data: [{
x: 140,
y: null
},
{
x: 155.5,
y: 3500
},
{
x: 886.35,
y: 3500
},
{
x: 1617.2,
y: 0
},
{
x: 2348.05,
y: 0
},
{
x: 2583,
y: null
}
],
fill: false,
borderColor: '#4bc0c0'
}]
},
options: {
showXLabels: 30,
legend: {
display: false
},
tooltips: {
enabled: true,
},
scales: {
yAxes: [{
scaleLabel: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 3700
}
}],
xAxes: [{
scaleLabel: {
display: true,
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Just add type: 'linear' to the xAxes object, like this:
xAxes: [{
type: 'linear',
scaleLabel: { ...
Your first point has y:null and it won't be included on the chart. I changed it to x:140,y:0.
try{
var chart = new Chart(document.getElementById("my_chart"), {
type: 'line',
data: {
labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
datasets: [{
label: 'My chart',
spanGaps: false,
lineTension: 0,
data: [{
x: 140,
y: 0
},
{
x: 155.5,
y: 3500
},
{
x: 886.35,
y: 3500
},
{
x: 1617.2,
y: 0
},
{
x: 2348.05,
y: 0
},
{
x: 2583,
y: null
}
],
fill: false,
borderColor: '#4bc0c0'
}]
},
options: {
showXLabels: 30,
legend: {
display: false
},
tooltips: {
enabled: true,
},
scales: {
yAxes: [{
scaleLabel: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 3700
}
}],
xAxes: [{
type: 'linear', /* <--- this */
scaleLabel: {
display: true,
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
}]
}
}
});
}catch(e){}
body { m1argin-bottom: -30px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my_chart"></canvas>

Highcharts columnrange custom legend

I am creating a highcharts columnrange chart. I want a custom legend so that the legend would display according to "legendGrouping" and the associated colour for that series. From the jsfiddle example below I would expect the legend to show:
Running (green)
Failure (red)
Non-Failure (yellow)
Excluded (grey)
Here is the jsfiddle so far.
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
Thanks all

Used series.bar.linkedTo to make common legend for Excluded (3 events).
legend.labelFormatter to format legend
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
symbolPadding: 0,
symbolWidth: 0.1,
symbolHeight: 0.1,
symbolRadius: 0,
useHTML: true,
labelFormatter: function() {
//console.log(this.userOptions.legendGrouping)
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
"<span> " + this.userOptions.legendGrouping + " </span>" +
'</div>'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
Or
If you can update series data and add color as attribute as you added in series data. And also remove colorByPoint: true,
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
useHTML: true,
labelFormatter: function() {
return this.userOptions.legendGrouping
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
color: '#6cc14c',
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
"color": "#fde54a",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
"color": "#d9534f",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

HighCharts Bubble graph JSON as data source

I am stuck in a problem where bubble chart series is not plotting - inspite of doing it according to HighCharts example tutorial.
There is no error on browser console as well making it really difficult for me to figure out.
Following is the data received from AJAX onSuccess response:
d:"[{"id":"3","name":"Australia","x":"24.1","y":"19.9","z":"3.5"},{"id":"1","name":"England (STA)","x":"23.8","y":"20.5","z":"2.6"},{"id":"5","name":"Germany","x":"22.8","y":"20.9","z":"2.3"},{"id":"2","name":"Spain","x":"17.8","y":"22.2","z":"1.4"}]"
Below is full code where I binded it to HighCharts:
function ShowMaturityGraph() {
var params = {};
params.countryIDList = "1,2,3,5";
params.xAxis = "1";
params.yAxis = "2";
params.bubbleSize = "6";
$.ajax({
type: "POST",
url: "default.aspx/GetMaturityValues",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
visitorData(response.d);
},
failure: function (response) {
alert(response.d);
}
});
}
function visitorData(data) {
alert(data);
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Maturity Values'
},
subtitle: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
labels: {
format: ''
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: ''
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: ''
},
labels: {
format: ''
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: '',
x: -10
},
zIndex: 3
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
//format: '{point.name}'
}
}
},
series: $.parseJSON(data),
});
}

How about something like that i am using your data. You change it as you pleased. its high chart example with data provided above in the question.
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
"id": "3",
"name": "Australia",
"x": 24.1,
"y": 19.9,
"z": 3.5
}, {
"id": "1",
"name": "England (STA)",
"x": 23.8,
"y": 20.5,
"z": 2.6
}, {
"id": "5",
"name": "Germany",
"x": 22.8,
"y": 20.9,
"z": 2.3
}, {
"id": "2",
"name": "Spain",
"x": 17.8,
"y": 22.2,
"z": 1.4
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
hope that helps.