Overlapping bars with JQPlot - javascript

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

Related

how do I make all kinds of grids invisible in echart?

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}
}

HighCharts how to make a responsive legend?

I am making a HighCharts pie chart with a responsive legend, the legend should work on mobile views as well as tablet, pc, etc.
Here is sort of a link to my issue on js fiddle https://jsfiddle.net/sg657bpz/1/
And here are the styles
legend: {
align: 'center',
layout: 'horizontal',
width: 600,
x: 100,
itemMarginTop: 1,
itemDistance: 10,
itemWidth: 170,
},
Basically right now, the legend will just kind of cut the words out of the label when we go to mobile view..
I would like the legend to dynamically shrink in size kind of like how flexbox does, depending on how large your viewport is, so that It fits within the chart and keeps the same structure of having 3 columns and two rows.
How can I add this responsive functionality? In the responsive attribute, it only lets me set one value of either min width or max width, so I cannot do CSS like media queries. Also to create this two row funcitonality, I have to set the width to different numbers, and just kind've guess that It will go on two rows, is there a way to implement this feature easier?
Thank you for the help

Chartjs: How can I group datasets closer if I have maxBarThickness set?

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

Remove white Space on right side in Dygraphs

I'm developing a chart without legend or axis. In this chart I'm also drawing via the 2d context and the underlayCallback option.
The Problem I can not resolve is a mysterious white space on the right side of the chart (about 5px).
I modified a jsFiddle to represent the Problem:
http://jsfiddle.net/12magkox/
Dygraph Constructor for removing the legend and the axis:
legend: 'never',
axes: {
x: {drawGrid: true, drawAxis: false},
y: {drawGrid: true, drawAxis: false}
},
Check out the rightGap option. Your estimate of "about" 5px looks to be spot-on!
rightGap
Number of pixels to leave blank at the right edge of the
Dygraph. This makes it easier to highlight the right-most data point.
Type: integer
Default: 5

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

Categories

Resources