I am using echarts Angular version- ngx-echarts in my project. I want to catch click event done on a line graph. chartClick or any of the mouse event of ngx-echarts library is not working for line graphs but they are working for barGraphs. How can I catch click events in line graph using ngx-echarts
<div echarts [options]="chartOption"
(chartClick)="onChartEvent($event, 'chartClick')">
</div>
onChartEvent(event: any, type: string) {
console.log('chart event:', type, event);
}
Logical entity is not entering the onChartEvent function even when click is performed
You can do it by this way.
when you build your options, in series object populate:
series: [
{ // your bar
type: 'bar',
barWidth: '30%',
data: myData
},
{ // shadow bar
type: 'bar',
barWidth: '30%',
itemStyle: {
// transparent bar
normal: { color: 'rgba(0, 0, 0, 0)' }
},
barGap: '-100%',
data: myDataShadow,
animation: false
}
]
Where myDataShow is a copy of myData.
I recommend you put the biggest value in all positions of myDataShadow to make all bar clickable.
In the line chart the 'chartClick' event gets fired only if you click on the points of the lines.
Please go ahead and add the symbol, with that you can click over the point and the event would be triggered. Replace for example triangle over none as shown below:
private mySeries = {
type: 'line',
name: 'prod',
data: myData,
symbol: 'triangle',
itemStyle: {
color: '#35b53a'
}
};
Related
How do I color each boxes individually in an echarts box-plot based on a function?
The following function works on a simple bar chart and colors the bars appropriately:
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split("_", 1).toString()]
},
},
}]
However, it does not work on a box-plot:
series: [{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split('_', 1)];
}
},
encode: {
tooltip: [1, 2, 3, 4, 5]
}
},
{
name: 'outlier',
type: 'scatter',
encode: {
x: 1,
y: 0
},
datasetIndex: 2
}
]
If I provide color: "red" rather than a function all boxes are colored red. This leads me to believe that it needs to happen in the transform.config which I can't find in the documents or tutorial.
Echarts Box-Plot currently
The link is the complete charts in its current form.
Apparently, echarts only allows scripting (i.e., using a function for) either the line color -- option itemStyle.borderColor or the fill color -- option itemStyle.color.
The difference between the two appears to be made by the value of the internal property BoxplotSeriesModel#visualDrawType. It is now set to "stroke", which means that borderColor can be set via a function.
Since you wanted to set the fill color, its value should be set to "fill". I searched a way to change that property - it was rather difficult for echarts don't document an API for extensions. Still, navigating the source code I came up with this hacky solution:
const BoxplotSeriesModel = echarts.ComponentModel.getClassesByMainType('series').find(cls=>cls.type==='series.boxplot');
const BoxplotSeriesModelFill = function(...args){
const _this = new BoxplotSeriesModel(...args);
_this.visualDrawType = 'fill';
return _this;
}
BoxplotSeriesModelFill.type = BoxplotSeriesModel.type;
echarts.ComponentModel.registerClass(BoxplotSeriesModelFill);
That's a "patch" to be applied at the beginning of your script, immediately after you have the echarts global defined.
Here's a forked version of your code that uses that patch. The only other change I made was to set a borderColor (can now only be a fixed value) to black.
This will not get you all the way, but if you add colorBy: "data" to your options and remove the itemStyle, it will look like this:
I want to add echarts markpoint to chart for show specific events, as the figure below. I expect that I can add event on specific date. And when user hover event block(D), they can see tooltip about some details.
I tried to use echarts markpoint option to add event block, but I don't know how to get hover event to show tooltip. And I want to add event to specific data, but now I just can set it position by (x, y). Or Is there any way/option to solve my problem? Thank you!
markPoint: {
symbol: 'rect',
symbolSize: 15,
label: {
formatter: 'D',
},
itemStyle: {
color: 'rgba(70,78,86,.9)',
},
data: [
{ x: 70, y: 140 },
],
},
actual result
https://i.imgur.com/cE4HObG.png
expected result
https://i.imgur.com/UR2UBAO.png
events: {
click: function (event) {
this.lineWidth=5;
}
}
This is Highcharts series click event function. I set this series width 5 in here. It works when I do click on series but as I removed my mouse from series. Series width goes back to normal. I want this width to be stable what I set in click event. Until I don't change i.t
I think that you can use Series.update() method in case of your chart. Here you can find information about this method:
http://api.highcharts.com/highstock#Series.update
$(function() {
$('#container').highcharts({
plotOptions: {
series: {
events: {
click: function(event) {
this.update({
lineWidth: 5
})
}
}
}
},
series: [{
name: 'ADBE',
data: [1, 2, 3, 4]
}]
});
});
And here you can find simple example how it can work:
http://jsfiddle.net/5u6anyzb/3/
Best regards.
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.