luckily highcharts is been integrated to the application but the problem i am facing now is the rendering of the data..it works fine with the small amount of series but as the series goes on increasing the size of the graph displayed gets smaller n eventually nothing is visible..i am confused whether its a css problem or something else
here is how it looks:
any help I would be glad!!
That's not an issue with HighCharts but rather the way you are displaying your information. If your container/div has a certain size, HighCharts tries to figure out what would be the best way to display the information based on your parameters.
As you said, it looks fine with less data, so in that case, you just need to put in a scroll option in highcharts or a zoom in option, which allows you to display that information. Another option is to get rid of your legend, so you can see more of the chart (as long as your tooltip is being utilized), but after more data, the issue will reside again with that option.
Option 1 - Scrolling:
How to make highcharts scrollable horizontally when having big range in x-axis
Option 2 - Zooming:
chart: {
type: 'line',
zoomType: 'x'
}
Demo from Highcharts
Related
In the application I'm working on I have a chart with two x axes. Both are of category type (but I think that's irrelevant) and all the series have to be attached to the first axis, so the second has no related data.
The problem is that depending on the width of the chart, the second axis labels are rendered or not. I want always to render them (because it is completely related to the first one). I have tried many things:
To apply linkedTo axis property on second axis. Not valid becuase the representation of the axis is wrong.
To assign a series to the second axis. Not valid because the representation of the data is not real and even if it comes with no data, we have the same problem with the axis.
I've been playing with chart margins with no success.
I have created an example in jsfiddle. There you can see how the second axis just renders its horizontal line. If you modify the css class highcharts-figure, by narrowing the element, for instance, setting a width of 800px and render again the chart, you can see the labels for both axes. That's my goal. But I want it for any size of the chart.
This example runs with Highcharts in v6.1.0 because is the version installed in my app, but this issue happens with the latest version as well.
Do you have any idea why is this happening?
This must be a bug? I found that removing width altogether from CSS allows it to render properly at all widths, but unfortunately the initial render is still wrong.
It seems like a bug to me also. Could you report it on Highcharts Github issue channel?
As a temporary workaround, you can do an update on this additonal xAxis and "force" chart to show this axis again. See demo.
chart: {
events: {
load(){
this.xAxis[1].update({
visible: true
})
}
}
},
API
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
The bug is published in the highcharts github and there is another workaround for this issue.
Basically, it consists on assign to the second axis a fake series, as simple as:
{
showInLegend: false,
xAxis: 1
}
Here you have the full example: workaround.
(In my original post I said that I tried a similar solution -to add empty series to the second axis- and that it didn't worked for me. The most likely is that I was wrong, becuase I've tried this workaround and it's working fine.)
To solve the below problem, I've tried setting Offset and margin
I've got a pie chart:
which renders labels perfectly.
Sometimes when we change the datasource - the labels gets collapsed. And shows only ...
My intuition says this happens because of un-necessary white space on the right side.
How do I avoid this behaviour?
This is a known issue. But, currently, this behavior cannot be changed. This is in DevExpress' to-do list: dxPieChart - Provide the MinAllowedSizePercentage property.
When implemented, it should make it possible to improve the resulting chart layout by configuring the minimum allowed Pie size.
So just like highcharts have the basic area graph i.e. one area graph behind the another I want to have multi column graphs in which one series will be exactly behind the other series and will be visible through some transparency.
Currently highcharts have stacked column graphs but in those one series is either on the top of other series or is beside them.
I hope there must be some configuration available for that.
Yes, you can do it by setting grouping: false in the plotOptions.
Updated fiddle:
http://jsfiddle.net/jlbriggs/r8vaL7p8/
However, this is - generally speaking - a really bad way to show data, that adds unnecessary complexity and obfuscation of the data for the user.
FWIW.
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.
I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().