Customized label and Emphasis label overlap - echarts

I try to make the pie chart show 'customized label',change label when the mouse triggered. But except blue data everything else will overlap with 'emphasis label'.
'avoidLabelOverlap' not working.
Is there way?
enter image description here
enter image description here
this is a example
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'center',
formatter: function (params) {
var html = 'TEST';
return html;
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};


Finally,I find a method.
Use mouse event to change label in center.
<!DOCTYPE html>
<html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="width:600px;height:600px;">
</div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'Total',
textStyle: {
fontSize: 35,
},
x: 'center',
y: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Testname',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
textAlign: 'center',
label: {
normal: {
show: true,
formatter: function (params) {
return params.name+'\n'+params.percent+'%'
},
textStyle: {
fontSize: 20
},
},
},
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
},
{
name: 'Testname',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
textAlign:'center',
label: {
normal: {
show: true,
position: 'center',
formatter: '{b}\n{c}',
align: 'center',
verticalAlign: 'middle',
textStyle: {
fontSize: 0
},
},
emphasis:{
show: true,
textStyle: {
fontSize: 35,
fontWeight: 'bold'
},
formatter: '{b}\n{c}'
},
},
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
},
]
};
myChart.setOption(option);
myChart.on('mouseover', { seriesName: 'Testname' }, () => {
myChart.setOption({
title: {
show: false
}
})
})
myChart.on('mouseout', { seriesName: 'Testname' }, () => {
myChart.setOption({
title: {
show: true
}
})
})
</script>
</body>
</html>


Thanks for the accepted answer,
My case was series label was showing like you mentioned in question, and my need was to solve the same problem while hovering the mouse through legend.
Here is my addition.
// series name: Access From
labelOptionAlter = {
series: [
{ label: {
show: false,
position: 'center'
},
}
]
};
labelOptionDefault={
series: [
{ label: {
show: true,
position: 'center'
},
}
]
};
//similar to mouseover.
myChart.on('highlight', { seriesName: 'Access From' }, () => {
myChart.setOption(labelOptionAlter)
})
//similar to mouseout
myChart.on('downplay', { seriesName: 'Access From' }, () => {
myChart.setOption(labelOptionDefault)
})
Future scholars can read more here


I think there's no way to solve this problem.

Related

Google LineChart Displaying Nagative Value

I am displaying Google Line chart using below code
google.charts.load('current', {'packages':['corechart']});
//google.charts.setOnLoadCallback(drawChart);
function drawChart(chart_data) {
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
$.each(jsonData, function(i, jsonData){
var Day = parseFloat($.trim(jsonData.Day));
var SOLD = parseFloat($.trim(jsonData.SOLD));
var BOUGHT = parseFloat($.trim(jsonData.BOUGHT));
data.addRows([[Day, SOLD, BOUGHT]]);
});
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines:{
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: { color: '#f58646' },
1: { color: '#66BB6A' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
}
Its working fine like below if there data greater than 0
But if there all data value is 0, its display like below
I do not want display negative data and I will have never negative value in my data. So I have added code like below in options as suggested in some questions here.
viewWindow: {
min: 0
},
However its not working and still I have negative values showing. Can anyone help me here for solve the puzzle? Also in horizontal line its missing dates and show in batch of 5 like 5, 10, 15, its possible to show all?
Thanks!

that looks like some sort of bug with the 'current' version.
if we use version '45' it works properly.
google.charts.load('45', ...
see following working snippet...
google.charts.load('45', {
packages: ['corechart']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
data.addRows([
[0, 0, 0],
[5, 0, 0],
[10, 0, 0],
[15, 0, 0],
[20, 0, 0],
[25, 0, 0],
[30, 0, 0]
]);
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines: {
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: {
color: '#f58646'
},
1: {
color: '#66BB6A'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="google-line"></div>
or, when using the 'current' version,
if we add a max value to the viewWindow, then it will work...
google.charts.load('current', {
packages: ['corechart']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
data.addRows([
[0, 0, 0],
[5, 0, 0],
[10, 0, 0],
[15, 0, 0],
[20, 0, 0],
[25, 0, 0],
[30, 0, 0]
]);
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0,
max: 1
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines: {
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: {
color: '#f58646'
},
1: {
color: '#66BB6A'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="google-line"></div>

Laravel 8 ConsoleTvs / Charts 7 Implementing Chartjs Options

I am currently updating ConsoleTvs / Charts 6 to 7. The chart is rendering with expected data.
The chart is not rendering according to any of the set options object keys for legend point style circle, padding top 50, display 'y' & 'x' axis labelString, not display gridlines, positioning datalabels at end with start offset in bold and green :
const chart = new Chartisan({
el: '#test_chart',
url: "#chart('test_chart_route')",
hooks: new ChartisanHooks()
.colors()
.datasets(
[
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
]
),
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
I have also tried using the ChartisanHooks().options({...options...}) method with no change in set options.
Can anyone please show me in the right direction?

Instead of using the options hook, you defined options as a property. You should use .options({ ... }) but not options: { ... }.
The options hook however doesn't work for me, maybe I use an outdated Chartisan library. According to Custom Hooks, you can also merge the options to the chart as follows:
.custom(function({ data, merge }) {
return merge(data, {
options: {
...
}
}),
})
Please take a look at your amended and runnable code below and see how it works with the merge function.
const chart = new Chartisan({
el: '#test_chart',
data: {
"chart": {
"labels": ["First", "Second", "Third"]
},
"datasets": [{
"name": "Sample 1",
"values": [10, 3, 7]
},
{
"name": "Sample 2",
"values": [1, 6, 2]
}
]
},
hooks: new ChartisanHooks()
.colors()
.datasets(
[{
type: 'line',
fill: false,
borderColor: '#329865',
backgroundColor: '#329865'
},
{
type: 'line',
fill: false,
borderColor: '#1e5b3c',
backgroundColor: '#1e5b3c'
}
]
)
.custom(function({ data, merge }) {
return merge(data, {
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
}),
});
<script src="https://unpkg.com/chart.js#2.9.4/dist/Chart.min.js"></script>
<script src="https://unpkg.com/#chartisan/chartjs#^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>

Is it possible to make a double stack chart in ECharts

The ECharts provide stack option to stack multiple area/line charts together.
https://echarts.apache.org/en/option.html#series-line.stack
I have three charts that look like this:
To achieve it you can paste the following code here: https://echarts.apache.org/examples/en/editor.html?c=area-stack
option = {
title: {
text: 'Double stack',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
legend: {
data: ['stack 1', 'stack 2', 'basis'],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6'],
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: 'stack 1',
type: 'line',
areaStyle: {
color: 'red',
},
data: [140, 150, 160, 180, 160, 240, 160],
},
{
name: 'stack 2',
type: 'line',
areaStyle: {
color: 'green',
},
data: [120, 140, 130, 150, 120, 160, 125],
},
{
name: 'basis',
type: 'line',
areaStyle: {
color: 'blue',
},
data: [100, 110, 120, 130, 90, 130, 120],
},
],
};
However I would like to stack both the green and the red charts on the blue one to get something like this:
I can add the values of the blue one to both other charts and get the result and get the following options:
option = {
title: {
text: 'Double stack',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
legend: {
data: ['stack 1', 'stack 2', 'basis'],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6'],
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: 'stack 1',
type: 'line',
areaStyle: {
color: 'red',
},
data: [140 + 100, 150 + 110, 160 + 120, 180 + 130, 160 + 90, 240 + 130, 160 + 120],
},
{
name: 'stack 2',
type: 'line',
areaStyle: {
color: 'green',
},
data: [120 + 100, 140 + 110, 130 + 120, 150 + 130, 120 + 90, 160 + 130, 125 + 120],
},
{
name: 'basis',
type: 'line',
areaStyle: {
color: 'blue',
},
data: [100, 110, 120, 130, 90, 130, 120],
},
],
};
but this way I will loose the interactive functionalities of ECharts.
Is there a possible way to do this? To stack the red and the green chart on the blue one but not on each other?

You need to do the same all series' names like this.
series: [
{
name: 'stack',
type: 'line',
areaStyle: {
color: 'red',
},
data: [140, 150, 160, 180, 160, 240, 160],
},
{
name: 'stack',
type: 'line',
areaStyle: {
color: 'green',
},
data: [120, 140, 130, 150, 120, 160, 125],
},
{
name: 'stack',
type: 'line',
areaStyle: {
color: 'blue',
},
data: [100, 110, 120, 130, 90, 130, 120],
},
],
and also, you can modify the tooltip with this
I hope, it will be helpful for you.

I found a simple solution for this by duplicating the basis graph with the very same data and colors, so the user doesn't see two graphs, then stack the red graph on one example of blue, and the green one on the other copy of the blue one like this:
option = {
legend: {
data: ['blue', 'red', 'green'],
},
xAxis: [
{
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6'],
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: 'blue',
stack: 'stack 1',
type: 'line',
areaStyle: {
color: 'blue',
},
data: [100, 110, 120, 130, 90, 130, 120],
},
{
name: 'blue',
stack: 'stack 2',
type: 'line',
areaStyle: {
color: 'blue',
},
data: [100, 110, 120, 130, 90, 130, 120],
},
{
name: 'red',
stack: 'stack 1',
type: 'line',
areaStyle: {
color: 'red',
},
data: [140, 150, 160, 180, 160, 240, 160],
},
{
name: 'green',
stack: 'stack 2',
type: 'line',
areaStyle: {
color: 'green',
},
data: [120, 140, 130, 150, 120, 160, 125],
},
],
};
This will insure that both copies of the blue graph (standing as basis for both red and green one) will be disabled/enabled together since they have the same name, and each one of the the red and green graphs is stacked on a different blue copy.

Highstocks chart multiple pane width and y axis alignment issue

I have issue with the width and alignment of y axis for each pane in my highstock multiple pane chart.
This issue is observed only if there are more than 2 panes in the highstocks chart.
What is the issue here?
$(function() {
var groupingUnits = [
[
'minute', // unit name
[60] // allowed multiples
],
[
'day', [1]],
[
'week', [1]],
[
'month', [1]]
];
Highcharts.setOptions({
global: {
useUTC: false
}
});
his_WscaleTranstek_chart = Highcharts.stockChart('container', {
plotOptions: {
series: {
dataGrouping: {
units: groupingUnits
},
marker: {
enabled: true,
symbol: 'cirlce',
states: {
select: {
fillColor: 'red',
lineWidth: 0,
radius: 5
}
}
},
cursor: 'pointer',
}
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
yAxis: [
{
opposite: false,
min: 0,
max: 50,
tickInterval: 5,
top:'0%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 1 '
},
plotBands: [{
from: 0,
to: 16,
color: 'rgba(16, 180, 146, 0.56)'
}, {
from: 16,
to: 19,
color: 'rgba(0, 195, 206, 0.5)'
}, {
from: 19,
to: 25,
color: 'rgba(7, 235, 78, 0.68)'
}, {
from: 25,
to: 30,
color: 'rgba(225, 239, 6, 0.68)'
}, {
from: 30,
to: 40,
color: 'rgba(239, 134, 5, 0.5)'
}, {
from: 40,
to: 50,
color: 'rgba(251, 44, 6, 0.5)'
}
],
lineWidth: 2,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
}, {
opposite: false,
min: 20,
max: 280,
tickInterval: 10,
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 2'
},
lineWidth: 1,
top: '17%',
height: '15%',
offset: 0,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},{
opposite: false,
min: 0,
max: 50,
tickInterval: 5,
top: '34%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 3'
},
lineWidth: 2,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},
{
opposite: false,
min: 0,
max: 80,
tickInterval: 5,
top: '51%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 4'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},
{
opposite: false,
min: 10,
max: 70,
tickInterval: 5,
top: '68%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 5'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},{
opposite: false,
min: 0,
max: 8,
tickInterval: 5,
top: '85%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 6'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
}
],
title: {
text: 'Chart',
style: {
color: '#4e80b2'
}
},
legend: {
enabled: false,
itemStyle: {
'cursor': 'default'
}
},
series: [
{
type: 'line',
name: 'BMI',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + Math.round((point.y)) + ' </b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 0,
showInLegend: false
},
{
type: 'line',
name: 'WEIGHT',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 1,
showInLegend: false
},
{
type: 'line',
name: 'Fat %',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 2,
showInLegend: false
},
{
type: 'line',
name: 'Water %',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 3,
showInLegend: false
},
{
type: 'line',
name: 'Muscle mass',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 4,
showInLegend: false
},
{
type: 'line',
name: 'Bone Weight',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 5,
showInLegend: false
}
],
navigator: {
height: 30
}
}
)
});
jsfiddle

You should set yAxis.offset for the axes.
yAxis: [{
offset: 0,
example: https://jsfiddle.net/gahjh1uz/

extjs pass param to form

I have a gridpanel with two column， first column show username, second column is a actioncolumn with edit button, when click edit button, change the user password by show a window with form and input new password.
How to pass the "username" to the form and show.
I'm trying to use Store.
Is there any other way?
my code
gridpanelview.js
actioncolumn:
/*...config*/
{
xtype: 'actioncolumn',
items: [
{
handler:function(view, rowIndex, colIndex, item, e, record, row) {
var pwdwin = Ext.create('myapp.view.SetPwdWin');
var store = Ext.create(myapp.store.mystore)
mysore.setData(record)
pwdwin.show();
},
icon: 'edit.png',
tooltip: 'change passpword'
}]
}
mywindow.js:
/*...config*/
dockedItems: [
{
xtype: 'form',
dock: 'top',
reference: 'form',
height: 200,
id: 'pwd_form',
bodyPadding: 10,
header: false,
title: 'My Form',
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
xtype: 'textfield',
flex: 1,
id: 'user_name',
maxHeight: 20,
padding: 10,
fieldLabel: 'Name',
editable: false
},
{
xtype: 'textfield',
id: 'new_pwd',
padding: 10,
fieldLabel: 'Password',
inputId: 'new_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
},
{
xtype: 'textfield',
id: 'confirm_pwd',
fieldLabel: 'confirm',
inputId: 'confirm_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: 'set_new_pwd'
}
}
]
}
],
set_form_username: function() {
//get Store data
form = this.getReferences().form.getForm();
//how to set username to the label
}
set_new_pwd: function(button, e, eOpts) {
//send username and new username to server
}

Try using getDockingRefItems('pwd_form') or getDockedItems()
For example:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
// way 1
w.getDockedItems()[0].items.items[0].setValue('your user name');
// way2
w.getDockingRefItems('pwd_form')[1].setValue('your user name');
w.show();
}
});
var w = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
dockedItems: [{
xtype: 'form',
dock: 'top',
reference: 'form',
height: 200,
id: 'pwd_form',
bodyPadding: 10,
header: false,
title: 'My Form',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'textfield',
flex: 1,
id: 'user_name',
maxHeight: 20,
padding: 10,
fieldLabel: 'Name',
editable: false
}, {
xtype: 'textfield',
id: 'new_pwd',
padding: 10,
fieldLabel: 'Password',
inputId: 'new_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
}, {
xtype: 'textfield',
id: 'confirm_pwd',
fieldLabel: 'confirm',
inputId: 'confirm_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
}, {
xtype: 'button',
text: 'OK',
listeners: {
click: 'set_new_pwd'
}
}]
}]
});
}
});