Group and stacked bar chart in apex charts react js

Group and stacked bar chart in apex charts react js - reactjs

I have created a horizontal bar stacked chart using apexcharts but I'm stuck at one and the last phase of completion and I tried so hard but were unable to find the solution, I've attached the actual chart and expected as well, all I want is just to group bars and show bars title.
series and options:
const series = [
{
name: 'Order Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-8PT-1', y: ['2021-6-1', '2021-6-23'] },
{ x: '8PT-1', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-8PT-2', y: ['2021-6-1', '2021-6-23'] },
{ x: '8PT-2', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-45PT-1', y: ['2021-6-1', '2021-6-23'] },
{ x: '45PT-1', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-45PT-2', y: ['2021-6-1', '2021-6-23'] },
{ x: '45PT-2', y: ['2021-6-1', '2021-6-30'] },
{ x: 'SWBD-AAA', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-BBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'EM3VJOFPPF', y: ['2021-6-1', '2021-6-25'] },
{ x: 'SWBD-CCC', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-DDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'RA7PSYODY6', y: ['2021-6-1', '2021-6-25'] },
{ x: 'ATS-8LSBB', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-8LSBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-8XBB', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-8XBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-45LSDD', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-45LSDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-45XDD', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-45XDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-45XBB', y: ['2021-6-1', '2021-6-20'] },
],
},
{
name: 'Order Date Delay',
data: [{ x: 'SWGR-MVA', y: ['2021-6-20', '2021-6-30'] }],
},
{
name: 'Approval Drawings',
data: [
{ x: 'SWGR-MVA', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-8PT-1', y: ['2021-6-23', '2021-7-15'] },
{ x: '8PT-1', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-8PT-2', y: ['2021-6-23', '2021-7-15'] },
{ x: '8PT-2', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-45PT-1', y: ['2021-6-23', '2021-7-15'] },
{ x: '45PT-1', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-45PT-2', y: ['2021-6-23', '2021-7-15'] },
{ x: '45PT-2', y: ['2021-6-30', '2021-7-21'] },
{ x: 'SWBD-AAA', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-BBB', y: ['2021-6-20', '2021-7-18'] },
{ x: '7RV3BTUV2E', y: ['2021-6-25', '2021-7-18'] },
{ x: 'SWBD-CCC', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-DDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'C5B4JOLXM5', y: ['2021-6-25', '2021-7-18'] },
{ x: 'ATS-8LSBB', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-8LSBB', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-8XBB', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-8XBB', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-45LSDD', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-45LSDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-45XDD', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-45XDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-45XBB', y: ['2021-6-20', '2021-7-18'] },
],
},
{
name: 'Approval Drawings Delay',
data: [{ x: 'HV-8PT-1', y: ['2021-7-8', '2021-7-15'] }],
},
{
name: 'Release For Manufacture',
data: [
{ x: 'SWGR-MVA', y: ['2021-7-21', '2021-11-1'] },
{ x: 'HV-8PT-1', y: ['2021-7-15', '2021-9-30'] },
{ x: '8PT-1', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-8PT-2', y: ['2021-7-15', '2021-9-30'] },
{ x: '8PT-2', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-45PT-1', y: ['2021-7-15', '2021-9-30'] },
{ x: '45PT-1', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-45PT-2', y: ['2021-7-15', '2021-9-30'] },
{ x: '45PT-2', y: ['2021-7-21', '2021-10-15'] },
{ x: 'SWBD-AAA', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-BBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-CCC', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-DDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-8LSBB', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-8LSBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-8XBB', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-8XBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-45LSDD', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-45LSDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-45XDD', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-45XDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-45XBB', y: ['2021-7-18', '2021-10-1'] },
],
},
{
name: 'Release For Manufacture Delay',
data: [
{ x: 'HV-45PT-1', y: ['2021-8-18', '2021-9-30'] },
{ x: '45PT-1', y: ['2021-8-21', '2021-10-15'] },
],
},
{
name: 'Test Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-11-1', '2021-11-4'] },
{ x: 'HV-8PT-1', y: ['2021-9-30', '2021-10-5'] },
{ x: '8PT-1', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-8PT-2', y: ['2021-9-30', '2021-10-5'] },
{ x: '8PT-2', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-45PT-1', y: ['2021-9-30', '2021-10-5'] },
{ x: '45PT-1', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-45PT-2', y: ['2021-9-30', '2021-10-5'] },
{ x: '45PT-2', y: ['2021-10-15', '2021-10-18'] },
{ x: 'SWBD-AAA', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-BBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-CCC', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-DDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-8LSBB', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-8XBB', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-8XBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-45LSDD', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-45LSDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-45XDD', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-45XDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-45XBB', y: ['2021-10-1', '2021-10-5'] },
],
},
{
name: 'Test Date Delay',
data: [{ x: 'SWBD-8XBB', y: ['2021-10-2', '2021-10-5'] }],
},
{
name: 'Ship Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-11-4', '2021-11-9'] },
{ x: 'HV-8PT-1', y: ['2021-10-5', '2021-10-9'] },
{ x: '8PT-1', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-8PT-2', y: ['2021-10-5', '2021-10-9'] },
{ x: '8PT-2', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-45PT-1', y: ['2021-10-5', '2021-10-9'] },
{ x: '45PT-1', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-45PT-2', y: ['2021-10-5', '2021-10-9'] },
{ x: '45PT-2', y: ['2021-10-18', '2021-10-20'] },
{ x: 'SWBD-AAA', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-BBB', y: ['2021-10-5', '2021-10-10'] },
{ x: '2H30E81WAN', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-CCC', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-DDD', y: ['2021-10-5', '2021-10-10'] },
{ x: '742INZHY93', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-8LSBB', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-8XBB', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-8XBB', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-45LSDD', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-45LSDD', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-45XDD', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-45XDD', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-45XBB', y: ['2021-10-5', '2021-10-10'] },
],
},
{
name: 'Ship Date Delay',
data: [
{ x: 'SWBD-AAA', y: ['2021-10-1', '2021-10-10'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-2', '2021-10-10'] },
{ x: 'ATS-8XBB', y: ['2021-9-3', '2021-9-8'] },
],
},
];
const options = {
plotOptions: {
bar: {
horizontal: true,
barHeight: '63%',
rangeBarGroupRows: true,
},
},
dataLabels: {
enabled: true,
enabledOnSeries: [1, 3, 5, 7, 9],
formatter: function (val) {
var a = moment(val[0]);
var b = moment(val[1]);
var diff = b.diff(a, 'days');
return '+' + diff; //+ (diff > 1 ? ' days' : ' day')
},
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '12px',
colors: ['#ffffff'],
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45,
},
},
colors: [
'#008FFB',
'#0065b3',
'#00E396',
'#00b377',
],
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'diagonal',
shadeIntensity: 0.01,
gradientToColors: undefined,
inverseColors: false,
opacityFrom: 0.7,
opacityTo: 0.9,
},
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 2,
opacity: 0.5,
},
grid: {
show: true,
borderColor: '#DEE2E6', //'#90A4AE'
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
row: {
colors: undefined,
opacity: 0.1,
},
column: {
colors: undefined,
opacity: 0.1,
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
xaxis: {
type: 'datetime',
min: undefined,
labels: {
show: true,
rotate: -45,
rotateAlways: false,
hideOverlappingLabels: true,
showDuplicates: false,
trim: false,
minHeight: undefined,
maxHeight: 120,
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined,
datetimeUTC: true,
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
},
},
lines: {
show: true,
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0,
},
axisBorder: {
show: true,
color: '#78909C',
height: 1,
width: '100%',
offsetX: 0,
offsetY: 0,
},
crosshairs: {
show: true,
width: 1,
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 0,
dashArray: 0,
},
fill: {
type: 'solid',
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 1,
opacity: 0.4,
},
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: 0,
fontFamily: 0,
},
},
},
yaxis: {
lines: {
show: true,
},
labels: {
show: true,
rotate: 0,
rotateAlways: false,
hideOverlappingLabels: true,
showDuplicates: false,
trim: false,
minHeight: undefined,
maxHeight: 120,
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined,
datetimeUTC: true,
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
},
},
title: {
text: 'Equipment Tags',
rotate: -90,
offsetX: -1,
offsetY: 0,
style: {
color: undefined,
fontSize: '12px',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0,
},
axisBorder: {
show: true,
color: '#78909C',
height: 1,
width: '100%',
offsetX: 0,
offsetY: 0,
},
crosshairs: {
show: true,
width: 1,
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 0,
dashArray: 0,
},
fill: {
type: 'solid',
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 1,
opacity: 0.4,
},
},
},
annotations: {
xaxis: [
{
x: new Date('15 Sep 2021').getTime(), //new Date().getTime()
borderColor: '#999',
yAxisIndex: 0,
label: {
show: true,
text: "Today's Date",
style: {
color: '#fff',
background: '#775DD0',
},
},
},
],
},
chart: {
background: '#fff',
foreColor: '#373d3f',
},
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'right',
horizontalAlign: 'left',
floating: false,
fontSize: '13px',
fontWeight: 400,
formatter: undefined,
inverseOrder: false,
width: undefined,
height: undefined,
tooltipHoverFormatter: undefined,
customLegendItems: [],
offsetX: 0,
offsetY: 0,
labels: {
colors: undefined,
useSeriesColors: false,
},
markers: {
width: 10,
height: 10,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
customHTML: undefined,
onClick: undefined,
offsetX: 0,
offsetY: 0,
},
itemMargin: {
horizontal: 20,
vertical: 4,
},
onItemClick: {
toggleDataSeries: true,
},
onItemHover: {
highlightDataSeries: true,
},
},
};
current output:
What I want:
Actual: -----------------------------
SWGR-MVA
Original: -----------------------------
Expected output image just to get a clear idea of what I want:

Related

Highcharts column chart with target and color gradient

Is below chart possible in highchart
Column with high, low and target
Color gradient with denser on target and lighter away
Data table for low, high and target
Managed to get some bits, but not full functionality
https://jsfiddle.net/z9u5hgod/2/
TIA
[
{
type: 'bullet',
dataLabels: [
{ format: '{point.y}' } ,
{format: '{point.target}',
inside: true},
{
inside: true,
verticalAlign: 'bottom',
align: 'center',
format: '{point.low}'
}
],
data: [
{
low: 250,
y: 1650,
target: 750,
color: {
linearGradient: [0, '70%', 0, '50%'],
stops: [
[0, 'green'],
[1, 'orange']
]
}
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}]

Response from higcharts developer
https://jsfiddle.net/BlackLabel/xbvp8he7/
const chart = Highcharts.chart('container', {
chart: {
type: 'bullet',
events: {
load() {
const firstSeries = this.series[0];
firstSeries.data.forEach(point => {
const {
low,
y,
target
} = point,
gradientPoint = (y - target) / (y - low);
point.update({
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'blue'],
[gradientPoint, 'purple'],
[1, 'blue']
],
}
})
})
}
}
},
plotOptions: {
series: {
pointPadding: 0.2,
groupPadding: 0.1,
targetOptions: {
borderWidth: 0,
height: 3,
color: 'red',
width: '100%'
}
}
},
xAxis: {
categories: ['Alex ar', 'Cairo ar']
},
series: [
{
type: 'bullet',
dataLabels: [{
enabled: true,
}, {
enabled: true,
verticalAlign: 'top',
align: 'center',
color: 'white',
useHTML: true,
formatter() {
const point = this.point,
target = point.targetGraphic,
targetY = target.getBBox().y - point.shapeArgs.y - 25;
return `
<div class="datalabelInside" style="position: relative; top: ${targetY}px">${point.target}</div>
`;
}
}, {
verticalAlign: 'bottom',
inside: true,
y: 20,
format: '{point.low}',
enabled: true
}, ],
data: [{
low: 250,
y: 1650,
target: 750
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}
],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});

How to display Range Apex chart when we have [start, end] are same at some time?

//Here #y:[start,end] at some point i have same start and end value but currently apex range chart don't show range bar when [start,end] is same value, but i need to show the bar for same [start,end] also how to do this?
var options = {
series: [
{
name: 'Bob',
data: [
{
x: 'Design',
y: [
4,4
]
},
{
x: 'Code',
y: [
5,7
]
},
{
x: 'Code',
y: [
0,1
]
},
{
x: 'Test',
y: [
10,10
]
},
{
x: 'Test',
y: [
4,4
]
},
{
x: 'Validation',
y: [
2,2
]
},
{
x: 'Design',
y: [
1,2
]
}
]
},
{
name: 'Joe',
data: [
{
x: 'Design',
y: [
1,2
]
},
{
x: 'Test',
y: [
6,6
]
},
{
x: 'Code',
y: [
9,9
]
},
{
x: 'Deployment',
y: [
5,5
]
},
{
x: 'Design',
y: [
4,7
]
}
]
},
{
name: 'Dan',
data: [
{
x: 'Code',
y: [
3,5
]
},
{
x: 'Validation',
y: [
3,3
]
},
]
}
],
chart: {
height: 450,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%'
}
},
xaxis: {
min: 0,
max: 10
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 0.6
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
//i need to show the bar for same [start,end] also how to do this?
//Please help me in this.

For values that have the same range, that is, the same start and end, you can add attributes to control the width and height of the bar, as well as the color, you also have to specify the value:
goals: [
{
value: 3,
// strokeHeight: 10,
strokeWidth: 3,
strokeColor: "#FEB019"
}
]
Example codesandbox
Useful apexcharts links:
https://apexcharts.com/react-chart-demos/column-charts/column-with-markers/
https://apexcharts.com/docs/chart-types/range-bar-chart/

Rendering multiple graphs in react js from canvasjs

I would like to render the stockprice graph referred from https://canvasjs.com/react-stockcharts/stockchart-date-time-axis-react/
import React, { Component } from 'react';
import CanvasJSReact from '../../assets/canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;
class Chart extends Component {
render() {
const options = {
theme: "light2",
title:{
text:"React StockChart with Date-Time Axis"
},
subtitles: [{
text: "Price-Volume Trend"
}],
charts: [{
axisX: {
lineThickness: 5,
tickLength: 0,
labelFormatter: function(e) {
return "";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
labelFormatter: function(e) {
return "";
}
}
},
axisY: {
title: "Litecoin Price",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Price (in USD)",
yValueFormatString: "$#,###.##",
type: "candlestick",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [36.040001, 37.500000, 35.790001, 36.950001] },
{ x: new Date("2016, 02, 01"), y: [37.099998, 39.720001, 37.060001, 39.169998] },
{ x: new Date("2016, 03, 01"), y: [38.669998, 39.360001, 37.730000, 38.820000] },
{ x: new Date("2016, 04, 01"), y: [38.869999, 39.669998, 37.770000, 39.150002] },
{ x: new Date("2016, 05, 01"), y: [39.099998, 43.419998, 38.580002, 43.209999] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.889999, 41.700001, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 43.500000, 40.549999, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 41.700001, 39.549999, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 41.040001, 36.270000, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 39.669998, 36.099998, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 42.840000, 38.160000, 40.380001] }
]
}]
},{
height: 100,
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Volume",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Volume",
type: "column",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [100, 40] },
{ x: new Date("2016, 02, 01"), y: [50,60] },
{ x: new Date("2016, 03, 01"), y: [60, -50] },
{ x: new Date("2016, 04, 01"), y: [-50, 20] },
{ x: new Date("2016, 05, 01"), y: [20, -40] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 40.380001] }
]
}]
}]
};
const containerProps = {
width: "100%",
height: "450px",
margin: "auto"
};
return (
<div>
<div>
{
// Reference: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
this.state.isLoaded &&
<CanvasJSStockChart containerProps={containerProps} options = {options}
/* onRef = {ref => this.chart = ref} */
/>
}
</div>
</div>
);
}
}
export default Chart;
Here is how I have tried. I found a single chart is rendered but more than one chart by using charts: [{}] isn't working. It shows nothing on my brower.
Has anybody had this kind of issue before? Do you think the reason is because I am using canvasjs graphs for free?

In case of column chart datapoints, y-value should be numeric but you are passing it as an array. If you like to show multiple values (a range) in y-value, you can use Range-Column Chart. Please find the working code below. Checkout this working sample.
import React, { Component } from 'react';
import CanvasJSReact from '../../assets/canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;
class Chart extends Component {
render() {
const options = {
theme: "light2",
title:{
text:"React StockChart with Date-Time Axis"
},
subtitles: [{
text: "Price-Volume Trend"
}],
charts: [{
axisX: {
lineThickness: 5,
tickLength: 0,
labelFormatter: function(e) {
return "";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
labelFormatter: function(e) {
return "";
}
}
},
axisY: {
title: "Litecoin Price",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Price (in USD)",
yValueFormatString: "$#,###.##",
type: "candlestick",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [36.040001, 37.500000, 35.790001, 36.950001] },
{ x: new Date("2016, 02, 01"), y: [37.099998, 39.720001, 37.060001, 39.169998] },
{ x: new Date("2016, 03, 01"), y: [38.669998, 39.360001, 37.730000, 38.820000] },
{ x: new Date("2016, 04, 01"), y: [38.869999, 39.669998, 37.770000, 39.150002] },
{ x: new Date("2016, 05, 01"), y: [39.099998, 43.419998, 38.580002, 43.209999] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.889999, 41.700001, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 43.500000, 40.549999, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 41.700001, 39.549999, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 41.040001, 36.270000, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 39.669998, 36.099998, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 42.840000, 38.160000, 40.380001] }
]
}]
},{
height: 100,
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Volume",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Volume",
type: "rangeColumn",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [100, 40] },
{ x: new Date("2016, 02, 01"), y: [50,60] },
{ x: new Date("2016, 03, 01"), y: [60, -50] },
{ x: new Date("2016, 04, 01"), y: [-50, 20] },
{ x: new Date("2016, 05, 01"), y: [20, -40] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 40.380001] }
]
}]
}]
};
const containerProps = {
width: "100%",
height: "450px",
margin: "auto"
};
return (
<div>
<div>
{
// Reference: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
this.state.isLoaded &&
<CanvasJSStockChart containerProps={containerProps} options = {options}
/* onRef = {ref => this.chart = ref} */
/>
}
</div>
</div>
);
}
}
export default Chart;

ReactJS/Nivo Graphs - How to modify the x-axis to be ascending date order when data contains "incomplete" data?

Question: How can I "reformat" the x-axis to be in ascending date, when the data contains a variable amount of dates within it?
I have some data that contains variable amounts of "date" associated with it. For example, Line One contains:
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }
Whereas Line Two contains:
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }
Code box: https://codesandbox.io/s/dreamy-almeida-x7rnd?fontsize=14&hidenavigation=1&theme=dark
The data is "uneven" on the x-axis, hence why it looks weird. I realise that if I were to put in "dummy dates" and data to it, then I can dictate the x-axis to become the format I want, the issue is dummy dates + data, because then it doesn't accurately model my database, so I want to avoid something like this.
What I've done so far is look over the documentation, I've tried adding in the type: "time" format to xscale, but I'm getting error
v.getTime() is not a function.

You have to add format to both ResponsiveLine Component and xScale property in order to use a time scale
xFormat:
Optional formatter for x values.
The formatted value can then be used for labels & tooltips.
If you use a time scale, you must provide a time format as values are converted to Date objects.
Complete config: (Working demo)
import React from "react";
import { ResponsiveLine } from "#nivo/line";
export default function App() {
return (
<div style={{ height: 350 }} className="App">
<ResponsiveLine
data={[
{
id: "LineOne",
data: [
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }
]
},
{
id: "LineTwo",
data: [
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }
]
},
{
id: "LineThree",
data: [
{ x: "2020-02-01", y: 4 },
{ x: "2020-03-01", y: 6 },
{ x: "2020-04-01", y: 1 }
]
}
]}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{
type: "time",
format: "%Y-%m-%d"
}}
xFormat="time:%Y-%m-%d"
yScale={{
type: "linear",
min: "auto",
max: "auto",
stacked: false,
reverse: false
}}
axisTop={null}
axisRight={null}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "count",
legendOffset: -40,
legendPosition: "middle"
}}
axisBottom={{
format: "%b %d",
//tickValues: "every 2 days",
// tickRotation: -90,
legend: "time scale",
legendOffset: -12
}}
colors={{ scheme: "nivo" }}
pointSize={10}
pointColor={{ theme: "background" }}
pointBorderWidth={2}
pointBorderColor={{ from: "serieColor" }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: "bottom-right",
direction: "column",
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: "left-to-right",
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: "circle",
symbolBorderColor: "rgba(0, 0, 0, .5)",
effects: [
{
on: "hover",
style: {
itemBackground: "rgba(0, 0, 0, .03)",
itemOpacity: 1
}
}
]
}
]}
/>
)
</div>
);
}

modified the following things and tested with random (none sorted data)
xscale type to time with the format
add indexBy="date" property to responsiveline element
add format: "%Y-%m-%d" to your axis bottom,
you can find a working example here
https://codesandbox.io/s/laughing-mestorf-zeozb
export default function App()
{ return (
<div style={{ height: 350 }} className="App">
<ResponsiveLine
data={[
{
id: "LineOne",
data: [
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 },
{ x: "2017-09-01", y: 6 }
]
},
{
id: "LineTwo",
data: [
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 },
{ x: "2018-09-01", y: 3 }
]
},
{
id: "LineThree",
data: [
{ x: "2020-02-01", y: 4 },
{ x: "2020-03-01", y: 6 },
{ x: "2020-04-01", y: 1 }
]
}
]}
indexBy="date"
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{
type: "time",
format: "%Y-%m-%d",
precision: "day"
}}
yScale={{ type: "linear", stacked: false, min: 0, max: "auto" }}
axisTop={null}
axisRight={null}
axisBottom={{
orient: "bottom",
tickSize: 5,
format: "%Y-%m-%d",
tickPadding: 5,
tickRotation: -65,
legend: "time",
legendOffset: 40,
legendPosition: "middle"
}}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "count",
legendOffset: -40,
legendPosition: "middle"
}}
colors={{ scheme: "nivo" }}
pointSize={10}
pointColor={{ theme: "background" }}
pointBorderWidth={2}
pointBorderColor={{ from: "serieColor" }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: "bottom-right",
direction: "column",
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: "left-to-right",
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: "circle",
symbolBorderColor: "rgba(0, 0, 0, .5)",
effects: [
{
on: "hover",
style: {
itemBackground: "rgba(0, 0, 0, .03)",
itemOpacity: 1
}
}
]
}
]}
/>
)
</div>
);
}

Another thing to note is that in the above answers, the date on the actual chart is -1 from the date in the data. To solve this, add "useUTC: false" to your xScale props.

Custom component not displaying on an Ext.panel.Panel

I have extended a component and I can't get it to render to a panel. Seems like I am missing something pretty basic since the debugger in Chrome actually shows that the panel has the data, it just isn't showing up.
Here is the fiddle and here are parts of the code:
Custom Component:
Ext.define('StoplightControl', {
extend: 'Ext.draw.Component',
alias: 'widget.Stoplight',
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent: function () {
var kpiData; // = Ext.data.StoreManager.get('KPIStore').getById(this.model.get('KPI_ID'));
if (typeof (kpiData) === 'undefined' || kpiData == null) {
kpiData = Ext.create('KPIModel', {
ControlBackground: '#000000',
Caution_label: 'On',
Good_label: 'Ahead',
Poor_label: 'Behind',
Good_color: '#00FF00',
Poor_color: '#ff0000',
Caution_color: '#550000',
Header: 'Test'
});
}
this.setGradients(kpiData.get('ControlBackground'));
this.drawItems(this.model, kpiData);
},
setGradients: function (controlColor) {
this.gradients = [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: controlColor,
opacity: 1
},
50: {
color: controlColor,
opacity: .6
},
100: {
color: controlColor,
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}]
},
drawItems: function (model, kpiData) {
var cautionValueX = -22.5 * (model.get('cautionValue').toString().length) + 227.5,
goodValueX = -22.5 * (model.get('goodValue').toString().length) + 227.5,
poorValueX = -22.5 * (model.get('poorValue').toString().length) + 227.5,
maxLineLength = 15,
changeOfY = -50,
cautionLabel = linebreaks(kpiData.get('Caution_label'), maxLineLength),
goodLabel = linebreaks(kpiData.get('Good_label'), maxLineLength),
poorLabel = linebreaks(kpiData.get('Poor_label'), maxLineLength),
cautionChangeY = (cautionLabel.split("\n").length - 1) * changeOfY,
goodChangeY = (goodLabel.split("\n").length - 1) * changeOfY,
poorChangeY = (poorLabel.split("\n").length - 1) * changeOfY,
headerFontSize = '100px arial,sans-serif',
textFontSize = '80px arial,sans-serif';
var drawItems = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x: 224,
y: 896,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Good_color')
}, {
type: "circle",
x: 224,
y: 214,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Poor_color')
}, {
type: "circle",
x: 224,
y: 555,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Caution_color')
}, {
type: "text",
id: "svg-stoplight-poorValue",
text: model.get('poorValue'),
x: poorValueX,
y: 220,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionValue",
text: model.get('cautionValue'),
x: cautionValueX,
y: 560,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodValue",
text: model.get('goodValue'),
x: goodValueX,
y: 900,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-poorLabel",
text: poorLabel,
x: 500,
y: 220 + poorChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionLabel",
text: cautionLabel,
x: 500,
y: 560 + cautionChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodLabel",
text: goodLabel,
x: 500,
y: 900 + goodChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-headerLabel",
text: kpiData.get('Header'),
x: 145,
y: -40,
fill: "Black",
font: headerFontSize
}, {
type: "text",
id: "svg-stoplight-totalLabel",
text: "Total = " + model.get('total'),
x: 100,
y: 1250,
fill: "Black",
font: textFontSize
}];
//don't add gradients if IE is > 10 or documentMode is less than 9
if (!(ie > 10 || document.documentMode < 9)) {
drawItems.push({
type: "ellipse",
id: 'test1',
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
});
}
},
width: 210,
height: 250
});
Creation of the Panel and adding the component:
var displayPanel = Ext.create('widget.panel', {
width: 600,
height: 800,
title: 'Cost & Schedule Variance',
renderTo: 'WorkstreamStoplights',
pack: 'center',
shrinkWrap: 3,
layout: {
type: 'table',
column: 2
},
});
stoplightStore.each(function (model, idx) {
var stoplight = Ext.create('StoplightControl', {
model: model
});
displayPanel.add(stoplight);
});
displayPanel.doLayout();
As you'll be able to see from the fiddle, the Title displays properly and I have even added an item to the displayPanel on creation, but doing a .add() doesn't seem to have any effect even with the .doLayout()

Haven't dabbled in ExtJS for a long time, but the 4.2 doc states, for this method:
This method needs to be called whenever you change something on this
component that requires the Component's layout to be recalculated.

Ah, silly me. I needed to add items to my component. I needed to make the assignment in the initComponents of
this.items = drawItems;
Working fiddle

Develop Reference

c reactjs sql-server angularjs arrays wpf database batch-file google-app-engine silverlight

Group and stacked bar chart in apex charts react js - reactjs

Related

Highcharts column chart with target and color gradient

How to display Range Apex chart when we have [start, end] are same at some time?

Rendering multiple graphs in react js from canvasjs

ReactJS/Nivo Graphs - How to modify the x-axis to be ascending date order when data contains "incomplete" data?

Custom component not displaying on an Ext.panel.Panel

Categories

Resources