Zooming with a zoomType of 'x' in a Highcharts chart, seems to only crop the data area between given coordinate stops. Is there a way to zoom in and still have all data available through scrolling?
{
chart: {
borderWidth: 0,
zoomType: "x",
scrollablePlotArea: {
scrollPositionX: 1,
minWidth: 1057
}
}
}
https://jsfiddle.net/OysteinAmundsen/4x7yzu68/3/
The fiddle above is set to a minimum width of 1057px, while the max-width of the container is 800px. This forces a horizontal scrollbar. If you zoom in on the data, notice that the available scrolling area does not change. This means that the data is not zoomed, it is cropped and stretched to fill the area.
I know there are events I can hook on to - the redraw event seems a likely candidate. Perhaps I can adjust the minWidth and cancel the crop-zoom, or is there a config I'm missing wihch whould do what I want?
The simplest solution is to use scrollbar feature from Highstock:
scrollbar: {
enabled: true
}
Live demo: https://jsfiddle.net/BlackLabel/be5wvg9q/
API Reference: https://api.highcharts.com/highstock/scrollbar
Related
I've got a line-chart with potentially more than 10 points. It will be drawn inside a container element with fixed width (let's say 800px).
In case the points count gets more than 10, I need to make the chart scrollable in a way which initially displays only the last 10 points.
Here's the fiddle for what I have right now:
https://jsfiddle.net/kpx13oz9/69/
Currently, I have the scroll-bar initially sitting on the rightmost position (which is what I want). But, as I increase the number of totalItemCount, more points are included inside the scrollable plot and some of the ticks on the x-axis become hidden.
I'm looking for a configuration which enforces the following:
regardless of the number of points, display the latest 10 points. the rest of the points will be accessible by horizontal scrollbar.
All the ticks on the x-axis need to be displayed always. No auto-hide.
You can dynamically calculate the minWidth property based on the created chart. To show all of the labels, set xAxis.tickInterval to one day.
chart: {
events: {
load: function() {
const minWidth = this.plotSizeX / 9 * workOrderHistory.length;
this.update({
chart: {
scrollablePlotArea: {
scrollPositionX: 1,
minWidth
}
}
}, false);
this.xAxis[0].update({
width: '100%'
});
},
render: drawCrosshair(crosshair, 'red')
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3zowk9e/
API Reference: https://api.highcharts.com/highcharts/xAxis
I'm using apexcharts with vue. I want the sparkline graph to take 100% of the width of it's parent.
So this is what I did:
<div>
<apexchart
:options="chartOptions"
:series="series"
height="150"
style="width: 100%"
/>
</div>
I tried also to set the width as a prop of the component but it behaves the same.
Here are my chart options:
chartOptions: {
chart: {
type: 'area',
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 3,
},
xaxis: {
type: 'datetime',
}
}
So nothing special here, it is copied from apex dashboard example, the only thing I've added is trying to set the width 100%.
It overflows it's parent (green) and the parent's container (yellow) as shown here:
But also when I resize the window(without refresh) it doesn't retain its size, it becomes smaller than the parent:
How can I make it fill the width of it's parent (green container) and keep it that way (responsive)?
Thanks
I had the same issue, I just removed display: flex on the container and that resolved the issue :)
I figured out that the gap after resizing is due to missing data in the series and the fact that I have set a max attribute for the x axis.
So that solved issue #2.
Apparently the charts render before it should, so it doesn't get the right parent's width,
a workaround that solved it for me was to not render the chart after the component is mounted.
you can do
xaxis: {
tickPlacement: "between",
},
by defalut it is "On",
it just places you data in between so you can see a little space on left & right end of the x axis.
chart: {
width: '100%'
}
this might fix your issue
my issue resolved using this method ref
Im trying to make my Pie Chart fully responsive so it can be viewed on smaller devices. Im using the latest Highcharts version (Version 5) to draw the charts.
I have used the below code to give the chart a maximum and minimum width so the chart doest expand or shrink too too much
JS Code
responsive: {
rules: [{
condition: {
maxWidth: 500,
minWidth: 100
},
chartOptions: {
legend: {
enabled: true
}
}
}]
},
But unfortunately this doesnt seems to be working. The max and minimum width is not being applied to the chart.
Also how can i set the font size in the legend and chart (both percentage and the center text) dynamically (smaller) when its viewed on small screens. Now the font size remains the same on smaller screens which takes up lots of space and breaks the chart
I have setuped a demo over here https://jsfiddle.net/livewirerules/6wu282fu/11/
Any help will be appreciated
I answer this for upcoming referee
as of Highcharts 5, you have an ability to change font size with a dynamic value with em numbers eg: 1em
you can see it in action here :
[http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/em/][1]
I am using HighCharts version 4.0.4. I have a scatter chart which has percentage values for width and height. So the graph resizes automatically if the size of the container / the window has changed.
The only thing which does not change in size is the radius of the markers, because it seems that I only can define a Number, see here plotOptions.scatter.marker.radius.
Here is a JSFiddle here with a fix radiusof 10.
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
plotOptions: {
scatter: {
marker: {
radius: 10
}
}
}
/*, ... */
});
});
Resizing the container / window, the marker size is always the same. But my web page uses percentage or rem values and I also want to resize all markers of the graph. How can this be done?
Since the radius only takes a number, you can hook a handler to the window.resize (for example) and use it to grow or shrink the marker radius based on whether the width has increased or decreased (you can change the marker radius programmatically by passing an object with the new radius to the update method on each series).
I don't know if that is the path you want to take or not, but I've updated your Fiddle with a simple example showing just that.
In it I increment the marker radius by 1 if the handler detects that the width as increased and decrement it by 1 if it detects a decrease (you will have to figure out a better growth/decrease algorithm.
I'm attempting to use a highcharts in conjunction with Bootstrap. The pie chart is placed inside a column of 6 for example, so it takes up half the page. What has been happening is the datalabels are too long and so are being cropped out of the containing div.
A fix that has been proposed for this is to set a width on the datalabels.
like so:
pie: {
size: '60%',
allowPointSelect: true,
dataLabels: {
style:{
width:100
color:'black'
}
}
}
}
This works flawlessly for Chrome and mozilla, the width is set and the position of the datalabel changes so its all drawn closer to the pie chart. But when testing in IE8, (and I have to account for it unfortunately) the width is set, but it appears that the position of the datalabel is not changing, so I get even less of the data label visible on the screen.
I'll try get a jsfiddle or a screenshot up shortly so you can see what I mean, but initially I was just seeing if anyone had come across this issue before, or if there's a simple fix I am just missing.
Jsfiddle
I've commented out the width in the plot options so you can see what's happening.
When I uncomment the width, it renders perfectly in Chrome and mozilla. But in IE8, the position of the label doesn't change, so the left labels end up far away from the pie chart and still cropped.