I have a Highcharts with type: "column", stacking "normal". And when I hover blocks from the chart I need to show a border. So I set the next settings:
...
plotOptions: {
column: {
stacking: 'normal',
groupPadding: 0,
borderWidth: 10,
pointPadding: 0,
states: {
hover: {
brightness: 0,
borderColor: 'black'
}
}
}
}, ...
But when I hover block there is a problem with border - it overlapped by neighbours blocks, and the border isn't fully visible.
Maybe the Highcharts has some additional setting to avoid this bug, or maybe it's possible to increase z-index of hovered element?
Here is an example:
Grzegorz Blachliński, thank You very much! I found a few solutions on that github topic.
They are here: http://jsfiddle.net/LLo7324r/ , http://jsfiddle.net/rvk0gc9r/6/
Related
I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2, but i=I've recreated it using vanilla ChartJS, latest version).
In my example here, I've turned all the bar data to black, and put it on a red background, with a hover border of white. If you look close you'll see vertical lines of red between the bars (ie: we're seeing through the bars themselves to the red background) and the white hover border never triggers on the left side.
Any ideas as to if this may be a data issue, or an options setting I haven't messed with yet, or possibly a bug in the package? The chart we are rendering this with is using thousands of data points and it starts to look like a broken gradient with all the subpixel transparent lines showing up. Any assistance would be greatly appreciated, thanks!
Here's some quick demo code i've put in a JSFiddle as an example:
var barOptions_stacked = {
scales: {
xAxes: [
{
ticks: {
fontColor: "#FFF"
},
stacked: true,
},
],
yAxes: [
{
ticks: {
fontColor: "#FFF"
},
stacked: true,
},
],
},
};
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['2014', '2013'],
datasets: [
{
label: "one",
data: [100,200],
backgroundColor: 'black',
hoverBorderColor: '#FFFFFF',
},
{
label: "two",
data: [300, 400],
backgroundColor: 'black',
hoverBorderColor: '#FFFFFF',
}
],
},
options: barOptions_stacked,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<div style="background-color: red">
<canvas id="ctx"></canvas>
</div>
Here is a JSFiddle example, if you really expand the chart view up you'll see the lines in play.
JSFiddle Example
Bar Chart Example Img
I would like to edit or remove the gaps in a Higharts chart like this:
Is there any way to style or configure my chart to achieve this?
This is the Demo:
https://www.highcharts.com/samples/codepen/highcharts/demo/bar-stacked
Thanks
You can control the space between bars using pointPadding, groupPadding and borderWidth properties:
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
Demo:
https://jsfiddle.net/BlackLabel/at1r2xLj/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.borderWidth
In my image below you see two lines, both green, at the top.
The higher green line has a flag (that is what you see to the left).
The lower green line, is usually red.
After playing around for hours to determine what is making the lower line green, I discovered only changing lineColor on the flag of the higher green line above it, did this series change from red to green.
In the navigator below, you can see the bottom line is actually red. Underneath it, is a long green block - I don't understand where this is from.
Here is an example of changing the lineColor of the flag, and the line below changes.. you'll notice what looks like the big green mask in the navigator is still there.
Lastly, this is the same chart on another page - no problems at all, the red line is red.
The top line's flag looks like:
{
allowOverlapX: true,
showInLegend: false,
enableMouseTracking: false,
type: 'flags',
name: `${id}-flags`,
onSeries: id,
data: [{ title: 'Flag text', x: Date }],
shape: 'flag',
fillColor: 'green',
style: {
fontSize: 10,
fontWeight: 500,
color: '#FFFFFF',
paddingBottom: 2
},
yAxis: 0,
lineColor: flagColor[classification], //Responsible for overriding the line from red to green.
lineWidth: 1,
height: 12,
y: -45,
}
The higher and lower lines look something like this:
type: 'line',
startX,
endX,
id,
enableMouseTracking: true,
name: id,
showInLegend: false,
showInNavigator: true,
color: stroke,
lineWidth: strokeWidth,
marker: { enabled: false },
yAxis: 0,
data: [[startX, pPrice], [endX, price]],
I should also note that sometimes this doesn't happen, I just can't figure out what would cause this.
Has anyone run into something like this before?
So I was able to fix this, and if anyone ever stumbles upon it - here is the solution.
I'm not sure sure why this only happens sometimes, but it seems like lineColor should also be defined on the line series itself (as opposed to only color).
http://jsfiddle.net/5ojcppsc/
allowPointSelect: true,
borderWidth: 2,
depth: 25,
states: {
select: {
color: "black",
borderColor: "red"
}
}
I am not able to change borderColor of 3D columns on select. Is there any way to achieve this? Also I want to change the borderWidth on select.
PS I want to avoid using this.update() in select callback event.
You can catch the select event and directly manipulate on the SVG element.
Example:
- http://jsfiddle.net/h6etesbp/
plotOptions: {
column: {
allowPointSelect: true,
borderWidth: 2,
depth: 25,
point: {
events: {
select:function() {
var p = this;
setTimeout(function() {
p.graphic.attr({
'stroke': 'red',
'stroke-width': 2
})
},1);
}
}
},
}
},
I found and answered a similar question a few days ago that you may find useful:
Highcharts: Stacked Column increase borderWidth on select state.
I don't see any reason why the options would differ for 3D charts.
Try it out and let me know whether this works for you. I can work up a fiddle to further research what you're seeking if this question doesn't get you where you need to be.
How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.
Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?
You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.
Code
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: false
}
}
}
Example (updated the fiddle to point to version 2.2.4)
Here is an example demonstrating this.
As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.
Radial gradients are also part of Highcharts 3.0 now, here is an example
Update
Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:
size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example "75%". Defaults to .
in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug
Update (Aug 2014)
As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (example)
$(function () {
$('#container').highcharts({
title: null,
chart: {
type: 'pie',
margin: 0
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
my solutions; (for legend position margin-top error..)
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height:'100%' // added...
},
plotOptions: {
pie: {
size:'100%',
height: '100%',
dataLabels: {
enabled: false
}
}
}