is there a way to disable the data zoom option on the axis (y-axis) in my case. As you can see from the screenshot there is the motion which I would like to disable. The scrollbar on the y-axis should just execute the scrolling and not th zooming:
Gantt Chart Screenshot
This is the json declaration for the datazoom option:
type: 'slider', // horizontal scrollbar
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 17,
bottom: 0,
start: 0,
//end: 26,
end: 100,
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
showDetail: true,
backgroundColor: sliderBgColor,
fillerColor: sliderColor,
handleStyle: {
color: sliderHandleColor
}
}, {
type: 'inside', // horizontal mouse gestures
id: 'insideX',
xAxisIndex: 0,
filterMode: 'weakFilter',
start: 0,
end: 26,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: false
}, {
type: 'slider', // vertical scrollbar
yAxisIndex: 0,
zoomLock: true,
width: 20,
right: 0,
top: 30,
bottom: 20,
show: _rawData.ganttRows.data.length > noOfRows,
start: 0, // this defines the height of each line indirectly
end: Math.min(100, noOfRows * 100 / _rawData.ganttRows.data.length),
showDetail: false,
backgroundColor: sliderBgColor,
fillerColor: sliderColor,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
}, {
type: 'inside', // vertical mouse gestures
id: 'insideY',
yAxisIndex: 0,
start: 95,
end: 100,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true // move up and down with mouse wheel
}],
Just add the option brushSelect in your slider:
type: 'slider',
...
brushSelect: false,
Related
I am using Apache Echarts 5.2.2 and I am struggling with rotated x-axis labels. With large font sizes like 30, 40, they overlap the graph as you can see in the image below
Here the config
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: [
"Arta",
"Chahar Mahal va Bakhtiari",
"Drenthe",
"Gamprin",
"Kabale",
"Lvivska oblast",
"Tebessa",
"Wangdue Phodrang",
"Zagorje ob Savi",
"Zeeland"
],
axisLabel: {
fontSize: 40,
rotate: -45,
overflow: 'truncate',
width: 100,
}
},
yAxis: {
type: 'value',
name: 'km/s minus 299,000',
},
};
Anyone knows the solution or what I am doing wrong?
Trying to get a single split line to render on a stacked bar graph.
Here's the code:
options = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Graph 1', 'Graph 2']
},
grid: {
left: '7%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [40, 41, 42, 43, 44],
axisLabel: {
interval: 1
},
splitLine: {
show: true,
interval: function (param) {
//return param === 1; //what I'm trying to get it to do
return param > 0 && param < 2; //this doesn't work
//return param > 0; //this works, but adds a split line to everything above 1 as well, not what I want. vice versa (param < 2) also works, but again not what I want
},
lineStyle: {
type: 'dashed',
width: 2,
color: '#767676'
}
}
}
],
yAxis: [
{
type: 'value',
name: 'Y',
nameLocation: 'middle',
nameTextStyle: {
padding: [0, 0, 8, 0],
color: '#767676',
fontSize: 14
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'Graph 1',
type: 'bar',
barWidth: 20,
stack: 'Graph',
itemStyle: {
color: '#db0011'
},
data: [8000, 10000, 12000, 16000, 20000]
},
{
name: 'Graph 2',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: 'Graph',
itemStyle: {
color: '#00a69d'
},
data: [4000, 5000, 6000, 8000, 10000]
}
]
};
As per the above code,
param > 0 works but will add a split line to everything beyond 1 (1 and 2)
likewise, param < 2 will add a split line to everything before 2 (0 and 1)
param > 0 and param < 2 doesn't work (no split line appears)
setting a fixed number causes a split line to appear at the end of the graph as well, despite not being in the right interval (e.g. if my items went from 40 - 80 and I set an interval of 7, then the split line would appear before 47, 54, 61, 68, 75 and on 40 and 80)
How do I get a single split line to appear?
I've also seen Echarts how do you add dashed vertical line in between specific bars on bar chart?, however I don't have enough knowledge on how to modify this to work with a stacked bar chart.
How I want it to look like:
The way I ended up resolving this is:
var option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Graph 1', 'Graph 2']
},
grid: {
left: '7%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [40, '', 41, '', 42, '', 43, '', 44],
axisLabel: {
interval: 1
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: 'Y',
nameLocation: 'middle',
nameTextStyle: {
padding: [0, 0, 8, 0],
color: '#767676',
fontSize: 14
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'Graph 1',
type: 'bar',
barWidth: 20,
stack: 'Graph',
data: [8000, 0, 10000, 0, 12000, 0, 16000, 0, 20000],
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
data: [
{
name: "Test",
xAxis: 2.5,
lineStyle: {
color: '#767676',
width: 2,
type: 'dashed'
}
},
]
}
},
{
name: 'Graph 2',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: 'Graph',
data: [4000, 0, 5000, 0, 6000, 0, 8000, 0, 10000]
}
]
};
A few things to note:
Add a bunch of empty string entries for your labels (x-axis). As can be seen above, data is [40, '', 41, '', 42, '', 43, '', 44] instead of [40, 41, 42, 43, 44].
Add zeroes in your graph series relative to where you inserted empty string labels in your x-axis data above (e.g. 4000, 0, 5000, 0, 6000, 0, 8000, 0, 10000). Do this for each graph you have.
In any of the graphs, insert the above markLine syntax I added to Graph 1. You will need to adjust the value of xAxis until you get the middle point.
Demo: https://jsfiddle.net/k9hgj5zb/1/
Credits to this link: Draw horizontal target line using EChart.JS
I have data from 10/19 to 11/01 and I am plotting it using a scattered Highcharts plot (v4.1.10, cannot upgrade). For some reason my x-axis is showing 10/18, but I want it to start with 10/19. I tried using pointStart, but this did not work. Any suggestions on how to get the correct starting date to show in my x-axis?
Highcharts.chart('container', {
yAxis: {
gridLineWidth: 0.5,
gridLineColor: '#D6D6D6',
tickInterval: 5,
dashStyle: 'LongDash',
lineColor: '#D6D6D6'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d',
week: '%d/%b',
month: '%b/%y',
year: '%Y'
},
title: {
enabled: true,
text: 'date'
},
gridLineWidth: 0,
lineColor: '#D6D6D6',
lineWidth: 0.5,
startOnTick: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: this.toolTip
}
},
chart: {
marginTop: 5,
marginRight: 0,
reflow: false,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
style: {
fontFamily: 'Open Sans'
},
type: 'scatter',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
tooltip: {
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x)
+ ' - ' + Highcharts.numberFormat(this.y, 2);
return s;
},
},
series: values
});
jsfiddle code here
You can set the x axis min value:
xAxis: {
min:1539950400000
Example: http://jsfiddle.net/jlbriggs/dwnx6o8e/9/
Depending on the data and other options, you may need to look at other properties, like startOnTick, tickInterval, etc.
I have been trying to achieve a chart like below using Highcharts library.
All i have been able to achieve is this http://jsfiddle.net/HpdwR/1489/ . So is there a way i could control how much the outer circle covers and its color. Also putting a title at the center of the chart.
Here is the config i have used to draw the chart
{
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
series: [{
name: 'Browsers',
data: [
["Chrome", 70]
],
size: '60%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]
}
I would also like to know if there are any other js libraries that could draw the same.
Tooltip Image
You can use solid-gauge type of chart with circle background (instead of default arc).
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: 'black',
innerRadius: '0%',
outerRadius: '80%',
shape: 'circle'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: true,
y: -25,
borderWidth: 0,
useHTML: true,
format: '<div style="text-align:center"><span style="font-size:45px;color:#fff;">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
}
}
},
Example:
http://jsfiddle.net/12kwyftq/1/
you can use start angle ,end angle to make it desired view
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
example fiddle
I add Ext.draw.Component inside grid cell as column renderer:
renderer: function(_value){
var id = Ext.id();
Ext.Function.defer(function(){
Ext.create('Ext.draw.Component', {
minWidth: width,
id: 'timer-' + id,
width: (_value * width),
style: {
position: 'absolute',
'z-index': '10000000',
},
height: 17,
renderTo: id,
resizable: {
dynamic: true,
pinned: true,
handles: 'w e',
widthIncrement: width,
},
gradients: [{
id: 'grad1',
angle: 270,
stops: {
0: {
color: '#6594cf'
},
1: {
color: '#c6d8ed'
},
99: {
color: '#5f96db'
},
100: {
color: '#6594cf'
}
}
}],
items: [{
type: 'rect',
fill: 'url(#grad1)',
width: '100%',
height: '100%',
x: 0,
y: 0
}],
draggable: {
constrain: false,
},
listeners: {
}
});
}, 25);
return '<div id="' + id + '" style="width:1000px;" class="timers" />';
}
I need to know, how to drag this draw component only by x-axis. And I need name of listeners, whitch called on drag and on resize.
There is listner resize, but funciton return only new width and height (or I dont know some thing), I need to know, to whitch resizable handle was user pooled - left or right?