today I noticed something strange with my treemap.
If you have 3 levels and you drill them down, then you go
one level up und you drive around with your mousecursor and then you
go on the top level, it looks something like that:
Treemap Bug
You can test it with the official Treemap-Demo, you only have to add
series: [{
...
opacity: 1.0,
...
}],
http://jsfiddle.net/ks7qqaoz/
Is there any workaround because because with big treemaps this happens quite often!
thanks
Related
I am looking for a way to skip weekends while using date-time xAxis with Highcharts Gantt.
I have read a few posts about the
xAxis.ordinal
option for HighStock but I am using HighCharts
Also, I would need to stick to date-time because I plan on creating an interactive Gantt / planning and update a database with these interactions and I don't want to be able to Drag and Drop (or expanding) a task into a weekend. I believe I could prevent that with the drop event (I think there is one) but then, 2/7th of my graph would be "empty".
If anyone knows of a hack for this situation, I'm all for it !
PS:
As I type this, I realise that xAxis seems to always be datetime with Gantt, so the "hack" of defining every xValue myself was probably for a regular chart... Am I doomed to have weekends ?
Edit:
Here's a fiddle of where we're at right now. As you can see, we are able to hide all weekends using
xAxis: [{
breaks: [{
from: Date.UTC(2018, 11, 8),
to: Date.UTC(2018, 11, 10),
breakSize: 0,
repeat: 7 * 24 * 36e5 //every week/7 days
}]
}]
But, unfortunately, breaks don't seem to be compatible with the "draggable-points" module and causes dragged points/tasks to "resize" themselves when moved over a break (weekends in our case), flicker and, at some point, even disappear from the Gantt :/ (Also, some labels act weirdly when dragging)
I suppose I could "hide" the weekend labels using a custom formater and checking the X value but this would probably leave a blank, but existing, column in the graph and this is why I need to truly remove these dates.
I'll probably have to leave the weekends turned on and do checks/maths so that adding 2 days to a 5 workdays task doesn't "draw" the task over the weekend but actually adds 4 days to compensate (modulo for the win) but that's not ideal...
Should I report this (kinda) weird behavior between draggable-points and xAxis breaks as a bug ? Technically, the points don't change value (I mean, in this demo, using the buttons and console, you see that the xmax-xmin for each point stays the same) but, when drag-dropped onto a weekend, they disappear. That's what I'm trying to avoid.
tl;dr:
The breaks act as black-holes when a point is dragged near them (you can't drag a to less than... half a week of distance between your mouse and the break).
Edit: bug report
You can use breaks to hide weekends on the chart. Below you can find an example how to use breaks, but you can also create a function which would insert a break in every weekend:
xAxis: [{
breaks: [{
from: Date.UTC(2018, 11, 8),
to: Date.UTC(2018, 11, 10),
breakSize: 0
}]
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/se1vL6mx/
API: https://api.highcharts.com/gantt/xAxis.breaks
I am putting together a barchart that shows 24 bars and how much production is done in each hour of the day.
Pretty simple.
I am using Highcharts.js version 4.0.1
However, I want to make this extra cool and make the current hour's bar have a different color (so you can see which bar you should look at for what hour).
So lets say:
you have 24 bars from left to right
It is 3PM in the afternoon
Therefore you want the "15th" bar in the series to be highlighted a certain color
Can anybody direct on this as I could not find this easily in the documentation.
Thank you.
You can just add a 'color' property to the series data. For example, the following has multiple points defining different colors, and a few that use the default bar color:
series: [{
data: [{y:10, color:'red'}, {y:20, color:'blue'}, {y:30, color:'#A84646'},
{y:40, color:'rgba(253, 134, 9, 0.7)'}, 50, 60]
}]
If I change the y-axis type to logarithmic on the meteogram example of the highcharts demo, the temperature line stops being visible. Is this a bug or is there something in the code preventing it from displaying when in logarithmic mode?
The only change I made to the demo was to add type: 'logarithmic' on line 492:
yAxis: [{ // temperature axis
type: 'logarithmic',
See this jsFiddle.
Any ideas? Thanks!
It seems like this is a (solvable and unknown?) bug indeed.
Somehow a logarithmic y-axis is not compatible with a negativeColor attribute.
Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute:
592| zIndex: 1,
593| color: '#FF3333',
594| negativeColor: '#48AFE8' << remove this line
Now the logarithmic plot will work as expected. See DEMO.
I have also set the y-axis min, max properties and both startOnTick and endOnTick to false to make the graph look a bit better. I hope this helps you out :)
Update 1: This bug has now been reported to GitHub
Update 2: Highcharts developers have solved this bug as of June 3, 2015 in commit fde07c2
In a previous question, Paweł Fus was so kind to come up with a grouped stack bar chart solution for me. You can find the question and answer here for context: Grouping a stacked bar chart in Highcharts
I am now attempting to use this approach and i am plagued with issues because this doesn't seem to scale well at all. In the scenario in the previous post there was only two bars per group to keep it a simple example. In reality there could be any number of bars. With the approach laid out in Pawel Fus's answer, just adding a a third bar breaks it. The reason is that the pointPlacement is dependent on the number of bars which is an easy fix but you'll quickly realize that the bars are not getting automatically adjusted to account for the width. Take a look at this jsfiddle for a simple demo of what im talking about:JsFiddle
Mandatory random code block to make Stack overflow happy... just ignore this code block.
So my questions are:
is there a better solution to my original question that would avoid all this?
Assuming that this is the correct approach, how do i calculate and set the width of these bars accordingly then set the correct pointplacments. I did find that i can get the chart height but not till the Highcharts object is created and i'm programatically creating this Highcharts config so i don't have access to it at that point.
You can try different approach, but formatting data isn't so obvious: http://jsfiddle.net/1ktmb2d2/3/ (or this one: http://jsfiddle.net/1ktmb2d2/4/) - now each vertical columns are different stacks, and names of that stacks doesn't really matter (formatter must be changed).
Note: when displaying different number of columns per category, it will always create a gap in the category where the number of columns is the lowest.
Simplified data:
series: [{
name: 'Happy',
id: 'Happy',
stack: 'Corolla',
color: 'blue',
data: [20, 30],
}, {
id: 'Unhappy',
name: 'Unhappy',
stack: 'Corolla',
color: 'black',
data: [10, 30],
}, {
linkedTo: 'Happy',
stack: 'Prius',
color: 'blue',
data: [30, 30],
}, {
linkedTo: 'Unhappy',
stack: 'Prius',
data: [30, 30],
color: 'black',
}, {
linkedTo: 'Happy',
stack: 'Highlander',
color: 'black',
data: [30],
}]
So we have tried many things but have decided that Highcharts just isn't meant to do this sort of thing. We have given this feedback to our UX team as a limitation of what we can implement with Highcharts at this time. In the mean time we have made our labels more informative as a stop gap. This comes at the cost of making those labels very bulky.
I do agree with the UX design that sometimes it makes sense to group our stacked bars within our charts to make a clear and readable chart for our end user. I looked around at other charting frameworks and i didn't see anyone offering a way to do this. I would not say highcharts is lagging behind it's competitors but it could definitely differentiate it's self if it chose to implement a easy to use feature like this
I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.