How to show yAxis value for multiple line - reactjs

I am using echart for display line chart.
In this chart yAxis values are not ploting for red line.
As you can see in tooltip value of green line is match position. At this point red line must be blow 9000.
How can i set yAxis value for multiple line.
Hare is my echart code
<ReactEcharts
option={{
animationDuration: 1000,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: usersData.indexes
}
],
yAxis: [
{
type: 'value',
}
],
series: [
{
name: 'Total new users',
type: 'line',
stack: 'Total',
data: [
5230,4963,5167,5715,5468,4752,9732,9312,8814,7900,6964,6889,7613,9363,5911],
smooth: false,
showSymbol: true,
},
{
name: 'India new Users',
type: 'line',
stack: 'Total',
data: [2515,2424,2691,2817,2687,2207,6769,4182,3941,3487,2716,2690,3381,4431,1493],
smooth: false,
showSymbol: true,
}
]
}}
/>

Related

HIghchart 3d piechart pointer is not pointing correct color

I have implemented the piechart using highcart. Highchart 3d piechart pointer is not pointing correct color. It is pointing the wrong area. But If I removed 3d options it is working as expected. Please find the below code snippet and screenshot.
chart: {
renderTo: element[0],
backgroundColor: 'transparent',
type: "pie",
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
height: dynamicHieght,
verticalAlign: 'top'
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: false,
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.name} - {point.incomingTaffic}</b>',
headerFormat: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
type: 'pie',
name: "Traffic in bps",
colorByPoint: true,
data: scope.chartconfig.data,
colors: ["#5DA5DA", "#F17CB0", "#414a89", "#ff8b80", "#ffa661", "#74beec" , "#ffbf00", "#b67bd1",  "#ffc54c",  "#e4e34f",  "#b2ff73",  "#60d394",  "#ee6055"]
}]

HIghcharts - chart width not the size of the parent container

I am trying to figure out why I have that chart wider than the container. I noticed that if I remove the width completely for the first screenshot and then set width: 100% in the next. However, I am not able to force this styles and I think this is not the right way to go.
Here are the settings of my chart. Apart from that, I do not use any other css.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container10',
type: 'line',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacingRight: 5,
height: 370,
width: 770
},
title: {
text: 'Database volume'
},
colors:['#229369', '#00526F'],
xAxis: {
categories: catValues
},
yAxis: [{
title: {
text: 'Table size in MB'
},
labels: {
style: {
color: '#229369'
}
}
},
{
title: {
text: 'Index size in MB'
},
labels: {
style: {
color: '#00526F'
}
},
opposite: true
}],
tooltip: {
valueSuffix: ' MB'
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'Table',
data: series1,
}, {
name: 'Index',
yAxis: 1,
data: series2
}]
});
I am not sure if this is the correct way of fixing that, but seems to work. I set the width of the container of the chart directive.
.chart-wrapper {
width: 99%;
}
Then in the directive code onDataLoaded or windowResized I call this:
function resize() {
height = chart.height;
width = $(".chart-wrapper").width();
chart.setSize(width, height, doAnimation = false);
}

Zooming a specific series with Sencha Charts

I currently have a Sencha Line Chart which looks like this:
xtype: 'chart',
height: '100%',
store: 'ExperimentDataStore',
axes: [
{
type: 'numeric',
fields: [
'pmc1Value'
],
grid: true,
minimum: 0,
position: 'left',
title: 'PMC1Value'
},
{
type: 'numeric',
fields: [
'temperature'
],
position: 'left',
title: 'test'
},
{
type: 'numeric',
fields: [
'temperature'
],
position: 'left',
title: 'pmc6Value'
},
{
type: 'category',
fields: [
'timestamp'
],
title: 'Name'
}
],
series: [
{
type: 'line',
colors: [
'rgba(0,0,0,0.1)'
],
style: {
smooth: false,
stroke: '#000'
},
xField: 'timestamp',
yField: 'temperature'
},
{
type: 'line',
colors: 'rgba(0,200,0,0.3)',
style: {
smooth: true,
stroke: 'rgb(0,200,0)',
},
xField: 'timestamp',
yField: 'pmc1Value'
}
],
interactions: [
{
type: 'panzoom',
zoomOnPanGesture: true,
axes: {
top: false,
right: false,
bottom: false,
left: true
}
}
]
}
Currently the zoom action zooms the y Axis on the left side for all of my Chart series. But what I would like to achive is zooming only one specific Series and not all of them. Can this be done?
No, you can not use PanZoom on an individual Series. The PanZoom interaction is only configurable on the Axis level not the series level. Zooming an individual Series is not supported out of the box.
But assuming that it can be done, can you describe what behaviour you want to have by zooming on a specific series? Like how do you want to visualize the other series? you will have distorted scales.

Ext.chart.Chart Not Working

When i replace with Ext.chart.CartesianChart with Ext.chart.Chart its not working,Here the code,
CartesianChart chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.CartesianChart",
requires: [
"Ext.TitleBar",
"Ext.chart.CartesianChart",
"Ext.chart.series.Line",
"Ext.chart.axis.Numeric",
"Ext.chart.axis.Category",
"Ext.draw.sprite.Circle"
],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
xtype: "chart",
store: "HrsAndValueByYear",
cls: "chart",
innerPadding: 20,
animate: true,
series: [
{
type: "line",
xField: "year",
yField: "hrsworked",
title: "Hours Worked",
style: {
stroke: "#003366",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#003366",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsworked",
color: "#000",
display: "over",
font:"10px Helvetica"
}
},
{
type: "line",
xField: "year",
yField: "hrsbilled",
title: "Hours Billed",
style: {
stroke: "#6d0060",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#6d0060",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsbilled",
color: "#000",
display: "over",
font: "10px Helvetica"
}
}
],
axes: [
{
type: "numeric",
position: "left",
title: {
fontSize: 15,
text: "Hrs"
},
minimum: 130000,
maximum: 180000,
grid: {
even: {
fill: "#f9f9f9"
}
}
},
{
type: "category",
position: "bottom"
}
]
}
});
Ext.Chart.Chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
alias : "widget.hrsworkedchart",
flex: 1,
shadow: true,
animate: true,
store: "HrsAndValueByYear",
axes: [{
type: 'Numeric',
position: 'left',
fields: ['year'],
minimum: 0,
hidden: true
}, {
type: 'Category',
position: 'bottom',
fields: ['hrsworked'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 15, false);
},
font: '9px Arial',
rotate: {
degrees: 270
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
style: {
fill: '#456d9f'
},
highlightCfg: {
fill: '#a2b5ca'
},
label: {
contrast: true,
display: 'insideEnd',
field: 'year',
color: '#000',
orientation: 'vertical',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['price']
}]
});
Whats wrong with my code.Please help me to solve
Couple of pointers
in axis config, the valid type is "numeric" , "category". You have it as upper case N and C.
Category axis should be years and numeric axis should be hrsworked.
i am not sure if there is a "column" series. Use "bar" instead.
you can see the sample here https://fiddle.sencha.com/#fiddle/51f and the code snippet below.
var store1 = Ext.create('Ext.data.Store', {
fields: ['year', 'hrsworked'],
data: [{
year: 2010,
hrsworked: 130000
}, {
year: 2011,
hrsworked: 140000
}, {
year: 2012,
hrsworked: 150000
}]
});
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
requires: ["Ext.TitleBar", "Ext.chart.CartesianChart", "Ext.chart.series.Bar", "Ext.chart.series.Line", "Ext.chart.axis.Numeric", "Ext.chart.axis.Category", "Ext.draw.sprite.Circle"],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
shadow: true,
animate: true,
store: store1,
cls: "chart",
innerPadding: 20,
animate: true,
series: [{
type: 'bar',
xField: 'year',
yField: ['hrsworked'],
style: {
fill: 'blue'
}
}],
axes: [{
type: "numeric",
position: "left",
minimum:0,
title: {
fontSize: 15,
text: "Hrs"
},
grid: {
even: {
fill: "#f9f9f9"
}
},
field: ['hrsworked']
}, {
type: "category",
position: "bottom",
label: {
font: '9px Arial',
rotate: {
degrees: 270
}
},
field: 'year'
}]
}
});

I want to render line chart using grouping on particular field

Currently I am rendering single line chart using json data which is as follow :
{"eventType":"A","startOpen":"0","asOfDate":"21-OCT-13","intervalNo":0},
{"eventType":"A","startOpen":"47","asOfDate":"21-OCT-13","intervalNo":1},
{"eventType":"A","startOpen":"60","asOfDate":"21-OCT-13","intervalNo":2},
{"eventType":"B","startOpen":"79","asOfDate":"21-OCT-13","intervalNo":4},
{"eventType":"B","startOpen":"90","asOfDate":"21-OCT-13","intervalNo":6}
I am plotting graph startOpen against intervalNo. Now I want to plot the graph using grouping on eventType field. Means for above data two line should be drawn in single chart, one for eventType A and another for eventType B.
Appreciate your any kind of help. Thank you :)
My current code for chart :
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: "Trends",
style: 'background:#fff',
animate: true,
shadow: true,
groupField:'eventType',
legend: {position: 'right'},
axes: [
{
type: "numeric",
position: "left",
fields: "intervalNo",
title:"Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}
],
series: [
{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalNo",
gField:'eventType',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
In order to plot multiple lines width different x values, you have to use multiple line series. Value points with value of undefined will be skipped, that is they won't be drawn in the chart.
Here's how to adapt your example data to do that (fiddle):
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: {
fields: [
'eventType',
{name: 'startOpen', type: 'int'},
'asOfDate',
'intervalA',
'intervalB'
]
,data: [
{"eventType":"A","startOpen":"0","intervalA":0,"intervalB":undefined},
{"eventType":"A","startOpen":"47","intervalA":1,"intervalB":undefined},
{"eventType":"A","startOpen":"35","intervalA":undefined,"intervalB":2},
{"eventType":"B","startOpen":"79","intervalA":undefined,"intervalB":4},
{"eventType":"B","startOpen":"90","intervalA":undefined,"intervalB":6}
]
},
style: 'background:#fff',
animate: true,
shadow: true,
groupField: 'eventType',
legend: {
position: 'right'
},
axes: [{
type: "numeric",
position: "left",
fields: ["intervalA", "intervalB"],
title: "Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}],
series: [{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalA",
title: "A"
},{
type: "line",
axis: 'left',
xField: 'startOpen',
yField: 'intervalB',
title: "B"
}]
});
Ext.widget('trendschart', {
renderTo: Ext.getBody()
,width: 600
,height: 300
});

Resources