I'm currently trying to combine an area chart with a column chart using HighCharts. However, when I select different ranges for the chart, the column chart cannot start from the leftmost and end on the rightmost. Please see the below pics.
It looks like we have some similar questions here, but none of them works for my case.
current_correct for 6 months
need_wrong for 7 days
The closest solution I can find is
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
with above
But this one only makes points without changing the coordinates on the x-axis. For example, the leftmost column in the above pic is 14.Sep but it does not at the right position.
Thanks for any help!
EDIT: It is very weird since I found that it has a smaller gap in each Monday and a larger gap in others weekday.... As the below pic.
weird case
Related
I'm using chart.js and have a chart with 2 line series and 2 bar series. The series can have irregular times, aka, there may be a missing interval or two in a series.
As far as plotting, it actually looks fine. But the tooltip will display the data for the next point that is populated, even if its missing for that period.
In other words, 3 of the series have a point for Jan, but the fourth series' first point is for February. It'll show the first 3 correct for January, and the fourth point on the January tooltip will be for February. Then on February, it'll show all four series February data correctly. I would expect the Jan tooltip to only show the 3 series that it has data for.
tooltips: {
mode: 'index',
intersect: false
}
I am working on a fiddle, but unfortunately I'm having trouble getting that to work (like, display at all). I will update the question once its working.
I've also tried mode being x, and label.
Here is the fiddle. Hover over the first data point and you will see the values for the two "you" series:
https://jsfiddle.net/kqofb5m2/3/
I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS
I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.
In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/
I'm having an issue with Highcharts which is not actually the framework's fault, but rather mine. The data I want to plot may have gaps sometimes in the middle of it, and when trying to plot the points the framework doesn't consider the density of the points and link the gaps when, in my case, it's not supposed to. As you can see in the image below the purple serie wasn't supposed to be linked, but rather leave a gap around 16:00 and 08:00.
One other problem that I face because of the gaps I have is that my chart is many times unproportional like in the image shown below where November takes 1/4 of the chart area, while the other months take the rest of the space. Also between August and September the space is larger than the other monthly intervals.
Last but not least there's finally the issue that I set my chart's X Axis accordingly to a date picker I have on my webpage and I'd love it to start and end at the dates picked, but it instead starts and ends at where the points start and end. I'm setting my limits like this:
xAxis: {
type: 'datetime',
min: min,
max: max,
minRange: $scope.minRange || Time.MINUTE,
events: {
afterSetExtremes: onLazyLoad
}
}
You can see the gap linking points problem over here
The unproportional chart problem here