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/
Related
Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart
You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value
I found this example that can help you:
Bar Chart with scrolling options
Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js
I would like to get shadow like effect in line graphs in Highcharts. I searched for this property but couldn't find it anywhere.
This can be done by using the shadow property, like this:
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 0,
offsetY: 5,
opacity: 0.2,
width: 5
}
}
},
Working example: http://jsfiddle.net/ewolden/zfscoz4f/2/
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843