There are some horizontal lines in the background and I need remove it. I go to the grid section in the document, but I did not find anything related to this.
It might not be intuitive, but grid is not about the 'grid' in the background, it's rather for positionning your chart(s) in a grid system.
The grid in the background is formed by xAxis and yAxis splitLine parameter. Horizontal lines are from yAxis splitLine and vertical ones are from xAxis splitLine. You can personalise it as you want and you can show/hide it as well, using :
yAxis: {
... // Your yAxis options
splitLine: {show: false}
}
Related
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
When I try to hover mouse along y-axis I observed that the tooltip is at the top but the point selected is at the bottom of the graph. This is because the point below might be the second point when we hover along the x-axis.
How do I make highcharts transverse points along the y-axis ?
Note: It is not a shared tooltip
I have tried setting the following attributes in the tooltip:
followPointer: true,
followTouchMove: true,
That is because of the default value of the findNearestPointBy option, which is 'x'. You can set it to 'y' or 'xy':
series: [{
findNearestPointBy: 'xy',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/2nqdxp3z/
API Reference: https://api.highcharts.com/highcharts/series.line.findNearestPointBy
I'm using a Chart.js beta 2 line chart. I'd like my x axis labels not to rotate, because it messes up my layout. I'm setting the options to have the ticks.maxRotation property set to 0. When I do so the labels are not skipped properly, but overlap instead.
this.options = {
scales: {
xAxes: [{
ticks: {
maxRotation: 0
}
}]
}
};
I also tried providing a ticks.userCallback to only show certain labels and skip myself, however I found doing this not only removes the label from the xAxis display, but also from the tooltip. I always want the tooltips to display the label.
So, what is the best way to keep labels oriented at 0 rotation and not have them overlap ?
I've been searching the flot docs and examples for a way to show the horizontal (y-axis) grid lines without plotting the vertical axis values (e.g. 0 to 100) without any success.
Is there a way to do this without the y-axis values?
and not this:
Yes, using tickFormatter:
yaxis: {
tickFormatter: function(){return ''}
}
See https://github.com/flot/flot/blob/master/API.md#customizing-the-axes.
Fiddle
I am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: false,
fillToZero: true,
barPadding: -5, // number of pixels between adjacent bars in the same group (same category or bin).
barDirection: 'vertical', // vertical or horizontal.
barWidth: 20, // width of the bars. null to calculate automatically.
shadowOffset: 0 // offset from the bar edge to stroke the shadow.
},
},
This indeed makes the bars overlapping but the second bar overlaps the first one.
I would like it vice versa.
Is this possible with JQPlot or does anyone know another library with this possibility?
There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.
$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);
Demo