I am using word-cloud2 with echarts:
Is there any option to add onclick to each word on echarts word-cloud2. My code is in js and is as follows:
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'apple',
width: 600,
height: 400,
tooltip: {
width: 0,
height: 0,
},
drawOutOfBound: true,
data: [
{
name: 'Machine Learning',
value: 10000,
},
]
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
after your call to setOption add this:
chart.on('click', 'series.wordCloud', function (el) {
console.log(el);
// add your custom logic here
});
Related
As the title say, I want to create apexchart using json data that I downloaded beforehand
I already search in internet to get json data use :
const df= require('data/processed.json');
And I already tried to call it df['liked'] as y and df['name'] as x
Is there something I miss?
Or call the column is not gonna do it?
I have also tried df.liked and df.name, btw
const df= require('data/processed.json');
var options = {
chart: {
height: 230,
type: 'line',
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false
},
stroke: {
width: 2,
curve: 'smooth'
},
series: {
name: 'Liked',
data: df['liked']
},
legend: {
position: 'top',
},
xaxis: {
type: 'string',
data: df['name'],
axisBorder: {
show: false,
},
label: {
style: {
color: '#ccc'
}
},
},
yaxis: {
show: true,
// min: 10,
// max: 70,
labels: {
style: {
color: '#ccc'
}
}
},
colors: ['#73b4ff', '#59e0c5'],
fill: {
type: 'gradient',
gradient: {
shade: 'light',
gradientToColors: ['#4099ff', '#2ed8b6'],
shadeIntensity: 0.5,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
},
},
markers: {
size: 5,
colors: ['#4099ff', '#2ed8b6'],
opacity: 0.9,
strokeWidth: 2,
hover: {
size: 7,
}
},
grid: {
borderColor: '#cccccc3b',
}
}
var chart = new ApexCharts(document.querySelector("#unique-visitor-chart"), options);
chart.render();
enter code here
try to use :
const df = fetch("./data/processed.json")
.then(response => {
return response.json();
})
A documentation about fetch
This way will catch all data on your json and pu it in your const df by using the return :)
If you want to use require() look about : https://requirejs.org/
NOTE : Try to use a lot console.log() to debug your js app.
I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app. I want to change the chart tooltip font family. Here is the options i am using in the chart. I am unable to apply font family to the line chart. i want to apply a custom font for the title in the tooltip. i have used props mentioned in the documentation of chart js
const options = {
animation,
plugins: {
tooltip: {
backgroundColor: "#fff",
displayColors: false,
borderColor: "#8b7a7a",
borderWidth: 0.5,
bodyColor: "#0000",
titleColor: "#8b7a7a",
// bodyFontColor: "#8b7a7a",
padding: 10,
footerSpacing: 0,
boxHeight: 10,
title: {
font: {
size: 50,
family: "'Work Sans',sans-serif",
},
},
callbacks: {
title: function (t, d) {
let datae = moment(t[0].label).format("MMM DD, YYYY");
const aa = t[0].dataset.label;
const val = t[0].formattedValue;
return `Date: ${datae.toString()}\n${aa}: ${val}`;
},
},
},
legend: {
display: false,
},
},
elements: {
line: {
tension: 0,
},
},
legend: {
display: false,
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},
};
As can be read here you need to configure the font for the tooltip title in the titleFont property and not in the title.font property:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
tooltip: {
titleFont: {
family: 'commic-sans-ms'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
you can change the style of tooltip in the chart.js, in the options property of chart. Inside options you need to access tooltip inside of plugins object, so first you have to create it, then create tooltip object inside it. Now, you can change some features of tooltip according to the this link.
for example:
plugins: {
tooltip: {
titleFont: { size: 13.2, family: "Yekan" },
bodyFont: { size: 14.2, family: "Yekan" },
callbacks: {
// to change the label context
label: function (context) {
var label = context.parsed.y;
return label;
},
},
},
}
By default, hover hides all other columns in all groups. How can I make it so that only the columns in that group are hidden on hover?
I found the hover event in the documentation, and getting the column (upper left), but how to hide it with it? Maybe through tooltip somehow?
My question in original view.
An example of how it works now:
Example how to:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: 'Some text'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Title y'
}
},
/*tooltip: {
shared: true,
split: true,
},*/
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
},
events: {
mouseOut: function (){
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
},
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0,
events: {
mouseOver: function() {
console.log("1");
}
}
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
.actions, .chart {
margin: 15px auto;
width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>
To achieve that, at first you need to set the opacity to 1 for inactive series and disable hover.
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
},
Then, use the mouseOver and mouseOut point events to find the points with the same category as the hovering one, and to update them with new opacity.
point: {
events: {
mouseOver: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
if (point.category === category) {
point.update({
opacity: 0.2
}, false)
}
})
})
chart.redraw()
},
mouseOut: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
point.update({
opacity: 1
}, false)
})
})
chart.redraw()
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/5Lcn6d8e/
API References:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.Point#update
I want a click event on highChart legends, so I'm trying below options but those are not working.
$scope.highchartConfig is a config which I'm using with angular 1.x.
Also I'm using highChart version 4. Please help me on what I'm doing wrong and what workout I need to.
$scope.highchartConfig = {
barGraph: {
options: {
chart: {
type: 'column',
height: 300
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
alert('TEST');
}
}
}
}
},
series: [
{
name: 'Quantity',
data: [40, 25, 10, 15]
},
{
name: 'Value',
data: [60, 25, 20, 60]
}
]
}
}
OR
$scope.highchartConfig = {
barGraph: {
options: {
chart: {
type: 'column',
height: 300
},
plotOptions: {
column: {
events: {
legendItemClick: function(event) {
alert('TEST');
}
}
}
}
},
series: [
{
name: 'Quantity',
data: [40, 25, 10, 15]
},
{
name: 'Value',
data: [60, 25, 20, 60]
}
]
}
}
All,
I'm trying to allow for a user to click on a highchart between two data points and draw a line. The resulting line will calculate LARGESTVALUE-SMALLESTVALUE above the rendered line.
I'm attempting to use this example (http://jsfiddle.net/2MdEN/1/).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
}]
});
});
});
The problem is that is connects the last data point in the series to the newly added point. I'd like the points to be detached from the series to allow for lines being drawn above the generated chart.
Is there any way to accomplish this?
Thank you
You can include a second empty series in your chart config, and change which series you are adding a point to:
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[1]; <------------
// Add it
series.addPoint([x, y]);
}
}
You can also then move your point click event into the second series, if you don't want users to be able to remove points from the original data:
series: [{
data: [
[20, 20],
[80, 80], null, [60, 40],
[85, 60]
]
}, {
id: 'dummy',
color: 'rgba(204,0,0,0.9)',
point: {
events: {
'click': function() {
this.remove();
}
}
}
}]
Updated example:
http://jsfiddle.net/2MdEN/107/
I used the following
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
var c = this.series[0].chart;
var s = this.series.length;
var x = e.xAxis[0].value;
var y = e.yAxis[0].value;
if(s == 1) {
c.addSeries('newSeries' + new Date());
c.series[1].addPoint([x, y]);
}else{
if(this.series[this.series.length-1].data.length%2 == 1) {
c.series[this.series.length-1].addPoint([x, y]);
}else{
c.addSeries('newSeries' + new Date());
c.series[this.series.length-1].addPoint([x, y]);
}
}
}
}
},
title: {
text: 'User supplied data!!!!'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});