My flotchart is rendering incorrectly, in two target browsers (ie8 and firefox) this graph renders with grid lines in front of the data
In Chrome and Safari no lines appear at all, which is the desired outcome. In Internet Explorer 8 the graphs are rendered as VML and I was able to isolate the grid lines as vml objects, unfortunately the CSS involved in hiding those objects would be tricky while limited to CSS2 and then that would not work for firefox, where the elements of the graph are not rendered as separate elements.
Here is the graph code http://jsfiddle.net/gamm/t3Vqh/2/
var dataset = [overdue, open, completed];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
align: "center",
horizontal: false,
barWidth: .8,
lineWidth: 0
},
grid: {
borderWidth: 0,
borderColor: null,
backgroundColor: null,
labelMargin: 10,
minBorderMargin: 10
},
yaxis: {
tickColor: "FFFFFF"
},
xaxis: {
tickColor: "FFFFFF",
ticks: [
[1, "Public Works"],
[2, "Sanitation"],
[3, "Mayor"],
[4, "L&I"],
[5, "Police"]
]
},
legend: {
position: 'ne',
show: true
}
};
$.plot($("#example-section15 #flotcontainer"), dataset, options);
There are two things happening here:
It looks like Flot has always drawn grid lines above series fills. This has never been considered a bug because the lines are by default very light, and the effect is much less noticeable when the bars (or lines, etc.) have borders.
The reason why you have black lines in IE is because "FFFFFF" isn't a valid color-spec. If you instead use "#ffffff" (or "transparent") then IE looks the same as the other browsers, which are more forgiving. This isn't restricted to IE8 or Excanvas; even IE10 chokes on that format.
The former might be worth submitting as an issue on Github, since it is arguably a bug.
Related
I'm using Chart.js with a React wrapper (react-chartjs-2). I want to upgrade to the latest major version of Chart.js (3.x) to remove the dependency on moment, among other benefits. There are lots of breaking changes in 3.x, and I've gotten nearly everything working again with all the breaking changes, except for this one infuriatingly small thing.
There is a tiny white border around the whole chart that I cannot for the life of me get rid of. The weird part is that it disappears when the data for the chart changes and it causes a re-render. This is what it looks like:
And this is what it's supposed to look like (seamlessly disappearing into the next div on the page):
It's probably one line in options that I need to change, but I can't figure out which line it would be. I thought it might be scale.[id].grid.zeroLineColor because the 3.x upgrade guide says this: "scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead." But I set color using the scriptable options like this:
grid: {
color: () => "transparent"
}
and that only fixed part of the issue. Because now the "zero line" isn't grey, but there still seems to be 1px of padding or something around the whole chart, on the bottom and on the right side.
I've set every other property I can think of.
Here's what the options look like right now:
const options = {
hover: { intersect: false },
borderWidth: 0,
clip: 0,
plugins: {
legend: {
position: "bottom",
align: "center",
display: false,
},
tooltip: {
intersect: false,
mode: "index",
callbacks: {
//This removes the tooltip title
// title: function () {},
label: ({ raw }) => {
return `$${formatNumber(raw)}`;
},
},
//this removes legend color
displayColors: false,
padding: 15,
position: "average",
pointHitRadius: 20,
pointRadius: 30,
caretSize: 10,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
borderWidth: 2,
bodyFont: {
family: "Satoshi",
size: 18,
},
bodyColor: "#303030",
titleFont: {
family: "Satoshi",
},
titleColor: "rgba(0,0,0,0.6)",
},
},
scales: {
y: {
ticks: {
backdropPadding: 0,
display: false,
},
stacked: false,
grid: {
drawBorder: false,
borderWidth: 0,
drawTicks: false,
color: "transparent",
width: 0,
},
drawBorder: false,
drawTicks: false,
},
x: {
padding: 0,
ticks: {
display: false,
padding: 0,
mirror: true,
backdropPadding: 0,
},
grid: {
drawBorder: false,
drawTicks: false,
display: false,
},
drawBorder: false,
drawTicks: false,
},
},
maintainAspectRatio: false,
}
and here's a pull request with all the code in context.
This problem was happening for me when responsive was set to true in the chart's options because the width and height that the chart assumes is set to the "ones" place - it doesn't include decimals. Example:
vs.
The canvas rendered by ChartJS ignores the decimal-level specificity of its parent wrapper... Whether by bug or by design.
Solution
In my case, the aforementioned bug resulted in a small white line at the bottom of the chart.
I got around the problem by setting the parent's style to display: flex; and flexing the chart to the end with flex-direction: column; and justify-content: flex-end. Since the chart was slightly shorter than the parent, flexing it to the end (bottom) of its parent wrapper effectively "removed" the white line.
Generally: Experiment with positioning the chart with knowledge that it's probably a fraction of a pixel less wide/less tall than its parent.
I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0. Here is my options object:
var options = {
autoResize: true,
height: '400px',
clickToUse: false,
layout: {
hierarchical: {
direction: 'UD',
sortMethod: 'directed',
}
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -80000,
springConstant: 0.001,
springLength: 200
}
},
nodes: {
shape: 'dot',
size: 20,
font: {
size: 15,
color: '#ffffff'
},
borderWidth: 2
},
groups: groups,
};
The problem is that it takes up to 4 minutes to render (see this simplified JSFiddle). In this example, much huger than the mine, the network is rendered almost instantaneously.
How can I speed up the rendering process of my chart?
Wait, your fiddle doesn't have all the options you mention in your post. For instance, the network is not shown at all before several minutes passes, but if you add physics: { stabilization: false } it is shown at once (although it is not static at that point and slowly relaxes). Moreover, adding barnesHut: { ... } to physics and adjusting springConstant changes the speed of relaxation.
But here's a tricky part: compare the unrelaxed tree (with stabilization: false) that you have with vis.js 4.21.0 and the one that you get with 4.19.1! It looks much nicer:
than this mess:
This was reported earlier and probably deserves more digging but what I can say for sure is 4.19.1 makes the initial tree much nicer to see stuff even before getting relaxed. With this version you can even go physcis: false and get this:
I'd consider using this approach although it has drawbacks:
the version with physics suffers from that to some extent too, so...
I have found a need to make sure Highcharts is only using 1 yaxis at a time, Basically I typically have about 5-10 series but many do not have the same yaxis measurement.
For instance with air pollution PM2.5 is measured by ug/m3 and most others are by ppm, but there is also ppb.
I want to by default show only ppb series, but if you select a series (from the highcharts legend) that uses for instance ug/m3 then all ppb series will be hidden.
I am having some difficulty defining it so looking through the docs I just can't seem to find any connection to my issue to find a solution, and I really want to avoid trying to force Highcharts to do it when it seems like something that would most likely be supported in some fashion.
What I am mainly looking for is how this might be termed by highcharts that might direct me to the correct portion of the docs, or if not supported by highcharts what I might be able to do to achieve this without over complicating the setup (click events on the legend items, ect).
You can achieve this by using series.events.legendItemClick and hide all other series when enabling one. Useful option is also yAxis.showEmpty which will hide all yAxis elements if extremes are not set.
Demo: http://jsfiddle.net/BlackLabel/aqh5htqt/
Highcharts.chart('container', {
yAxis: [{
showEmpty: false
}, {
showEmpty: false
}, {
showEmpty: false
}],
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (!this.visible) {
// Hide all others
Highcharts.each(this.chart.series, function(series) {
series.hide();
});
} else {
// Prevent hiding the only visible series
return false;
}
}
}
}
},
series: [{
data: [1, 2, 3]
}, {
data: [100, 400, 5000],
visible: false,
yAxis: 1
}, {
data: [5, 10, 15],
visible: false,
yAxis: 2
}]
});
I am struggling with a HighChart/HighStock problem. I have created a JSFiddle to explain my problem! When the user uses a drill down on one of the bar colums, the y-axis may shrink which causes the x-axis to get higher. This is no problem, but when the user goes back to the overview through a drill up, the previous x-axis length is implemented for the bar columns, while the x-axis gets lower. I can't find anything in the documentation to help my problem and I haven't found a similar problem.
The drilldown which I am using:
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#D2D2D2'
},
select: {
stroke: '#039',
fill: '#D2D2D2'
}
}
}
},
series: [{"data":......}]
}
Could someone please help me adjust the code so that on the drill-up event the bar columns are re-configured to reach the x-axis
It looks like it is a bug with drilldown animation which appears only when a navigator is enabled. Reported here.
Should work without the animation:
drilldown: {
animation: false,
example: http://jsfiddle.net/3e3xqv7e/47/
In general, I think a navigator was not meant to work with drilldowns, so making it work correctly might be tricky. An option series.showInLegend works, though, except the min/max of the navigator are changed after drillup - so you need to set it properly.
drillup: function (e) {
this.navigator.xAxis.setExtremes(0, 4, true, false);
/* this.navigator.xAxis.update({
min: 0,
max: 4
}, true);*/
}
example: http://jsfiddle.net/c1nqpz7d/2/
I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/
crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.