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.
Related
I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.
public drawChart(): void {
this.options = new StockChart ({
rangeSelector: {
selected: 0,
inputEnabled: false,
},
chart: {
type: 'spline',
},
yAxis: {
labels: {
formatter: function(): string {
return this.value + '';
},
},
opposite: false,
},
plotOptions: {
series: {
showInNavigator: true,
},
},
series: [],
});
}
To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.
Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
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'
}
};
I am using ApexCharts to show some stats. I wanted to hide the x-axis tooltip which is marked in red in the image
options = {
xaxis: {
tooltip: {
enabled: false
}
}
}
https://apexcharts.com/docs/options/xaxis/#tooltip
In another way, you can hide Xaxis using:
xaxis: {
labels: {
show: false
}
}
I don't think the above actually answer the OPs question. Based on their image and question they just wanted to remove the x-axis value at the bottom. You can do that by using CSS as follows:
.apexcharts-xaxistooltip-bottom {
display: none;
}
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.
How do I bind to or recognize a right-click event?
I have a scatter plot where left-click adds a point at the clicked location; I would like right-click to remove the point (if present).
This is my current code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
click: function(event) {
var cs = [Math.floor(event.xAxis[0].value),
Math.floor(event.yAxis[0].value)];
this.series[0].addPoint(cs);
}
},
type: 'scatter',
},
... etc. ...
});
This should help:Making Highcharts support right click context menu
This is not a full solution: I did not figure out how to capture right-click events.
But here's a workaround for clicking on the chart background:
have the user do a shift-click
supply a callback as before
in the callback, inspect the event. If shift was pressed, do something different
Here's what the callback might look like:
function clickChart(event) {
var isShiftPressed = event.shiftKey;
if(isShiftPressed) {
// do something
} else {
// do something different
}
The event object has boolean attributes shiftKey (and altKey).
Here's a workaround for removing points: (actually, it's not a workaround -- I just didn't realize there was an easier way!)
points have their own events
just set up a callback that removes points when they're clicked
Example:
function clickPoint(event) {
this.remove();
}
var chart = new Highcharts.Chart({
chart: {
type: 'scatter',
renderTo: 'chart',
},
series: [{
point: {
events: {
click: clickPoint
}
}
}]
});
Note: the documentation is misleading, at the least, but the jsfiddle examples seem to be correct. It seems to show that the point options are not in series.
Currently, there are only a few events supported by Highcharts.
for ref : https://www.highcharts.com/blog/tutorials/introduction-to-highcharts-events/
To add custom events, such as
double click (including mobile devices)
right click (context menu)
mouse over
mouse out
mouse down
mouse move
we can add a plugin
highcharts-custom-events
https://www.npmjs.com/package/highcharts-custom-events
hope you find this helpful and solves your problem.