Is there any way to keep interaction on markers covered by other areas (when the do have a fill color)?
Check the example:
http://jsfiddle.net/ozke/n4k57v5j/1/
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
fill: '#F00',
gridLineWidth: 1,
},
yAxis: {
enabled: false,
gridLineWidth: 0
},
series: [
// Required JSON code?
{
data: [15,20,10,20,30]
},{
data: [10,15,20,15,20]
},
]
});
The marker/dot in the blue area is impossible to reach/hover/interact when x=2.
In CSS, the equivalent would be using pointer-events:none; on the area (not the border or markers).
It's probably something to do with SVG and/or event propagation.
After some research I found out there's something similar to pointer-events: none; for SVG (used by Highcharts). There's a few options excluse for SVG but in my case what I needed was pointer-events: visibleStroke;
The solution would then be:
path { pointer-events: visibleStroke; }
Related
I'm struggling with Highcharts, I just want to highlight my columns on mouse hover events this way:
I used fake data like below, but I don't think it's the right way to perform this, moreover I want to keep the tooltip on real columns only, not above the fake one, even though I enabled shared tooltip.
series: [
{
states: {
hover: {
color: 'rgba(0, 0, 0, 0.4)',
},
},
data: [400000, 400000, 400000, 400000......], // fake data
type: 'bar',
color: 'white',
pointPlacement: 'on',
pointWidth: 120,
grouping: false,
tooltip: { enabled: false },
},
{
data, // real data from elsewhere
type: 'bar',
events: {
mouseOver: () => displayFakeData(),
mouseOut: () => hideFakeData(),
},
use xAxis.crosshair of Highchart for the hovered point.
xAxis: {
crosshair: {
color: "D9FFFFFF" // change BG color here
}
},
Code and Demo Here: https://jsfiddle.net/08m21kxo/16/
I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I am trying to change the default shadow color (when hovering over a bunch of bars for example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-label-rotation)
Focusing on this example on this code part:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, .......
..............................
............................................
the type variable has 3 options as stated in the documentation:
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.tooltip.axisPointer.type
but I couldn't find anything that can control the color of the shadow.
I want it in a much lighter gray color than it is by default.
Is there any other way to set the shadows color?
I have been exploring echarts.js for a while.. and sadly, except of the fact that all charts graphics are amazing, unfortunately - I find more cons than pros :(
Try this:
axisPointer.shadowStyle.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // color at 0% position
}, {
offset: 1, color: 'blue' // color at 100% position
}],
globalCoord: false // false by default
}
It is given in their documentation. Check this out: https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer
Hi i'm quite new to JS and looking for an easy way to show a custom map with my own backgroundimage and several points with x-y-coordinates on it.
At first it worked quite well using the "line"-chart-type of chart.js (v2.5) with disabled showScale()-option and fixed axes-max/min-values.
My problem is that the backgroundimage is not rescaling properly when i change the window-size or show/hide the legend of the chart.
Here is my JS-code for creating the chart:
function initMap() {
scatterChart = new Chart(document.getElementById("scatterChart"), {
responsive: true,
type: 'line',
data: {
/*datasets: [
{
}
]
*/
},
showScale: false,
options: {
scales: {
yAxes: [{
display: false,
ticks: {
max: y_max,
min: 0,
stepSize: 0.1
}
}],
xAxes: [{
display: false,
type: 'linear',
position: 'bottom',
ticks: {
max: x_max,
min: 0,
stepSize: 0.1
}
}]
},
onClick: function (evt) {
var activePoint = scatterChart.getElementAtEvent(evt);
},
legend: {
position: 'right',
labels: {
fontSize: 15
}
},
}
});
}
HTML:
<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('media/map_background.jpg'); background-size: 100% 100%;"></canvas>
Here are two images showing the effect:
https://1drv.ms/i/s!As59C5Mmd0nahr1zP4rjwI5KobaM3Q
https://1drv.ms/i/s!As59C5Mmd0nahr10KwUCJ4wpvfn4_g
What can i do to get a proper rescaling (points should always be shown on the same position on the map regardless of windowsize or enabled/disabled legend)?
Have you tried using the maintainAspectRatio property and setting it to true? That should hopefully fix your window resize issue.
The only way to fix the legend issue is to use a legend that is external to the canvas because the legend takes up space in the canvas so the chart is squished horizontally (there is no layering concept in a canvas). See this example for how to generate an external legend.
You must use the legendCallback property and the .generateLegend() prototype method.