How to get the uniform column width in DHTMLX bar chart - javascript

What is the default width of each column in the DHTMLX bar chart.
I know that we can set the width of bar. But what is the default width of each column.
As I observed it depends on the total width of the chart. The larger the width of the chart, the larger the width of each column in width. Am I correct?
If I am correct with the above statement, in my chart I giving the day number of the months as the X-axis values. the chart is drawing fine till the last day. For the last day I am getting too much space.
Please observe the space between 31 and 1.
Could you please tell me what would be the problem?
How can I get the uniform column width in my chart? Please advice

Chart counts default width itself. It depens on common chart width (container dimention), items quantity, etc.
There is offset settings you can set empty fields "around" chart scale

Related

Highcharts Gantt - data labels in top row are not respecting y offset positioning

I'm making a milestone comparison chart, and I'm putting the data labels above the milestone markers. The data labels are two rows of text.
I'm setting my own calculated chart.height in order to increase the row height so I can fit the data labels nicely within each row, and I'm using a combination of series.point.graphic.translate() and series.datalabels.y in order to position everything vertically within the row where I want it. I've got everything almost dialed in exactly how I want it.
However, it seems as though the data labels for the first row of data are not respecting the y offset I'm trying to set. In fact, it looks to me like instead of starting at the center of the row and offsetting the amount specified by series.datalabels.y, there's actually more offset being applied that is forcing the data labels to push up to the very top of the plot area.
In the screenshot, the red lines near most of the milestone markers/labels show what the offset should be: something very minimal, the label should be just barely above the point of the milestone marker. But the red boxes in the top row show how that offset is too much, the labels are being pushed too high (to where the top of the label is right against the edge of the plot area):
What's going on there, and how can I fix it?
Reference pen.
Well, I figured it out...
If I just don't apply the y offset to the datalabels for the first row, they seem to line up much better:
// yValue is essentially the row here, so 0 is the first row
series: {
dataLabels: {
y: yValue === 0 ? 0 : -31
}
}
Reference pen.

Customise size of data points , height and width in Chart.js?

Can you customise the height and width of the data points on Scatter chart? I want the square data point to be long rectangle line as demonstrated on the image below. The only option I see is pointRadius but that increases both h/w so doesn't give me desired size.
Thanks
On options of chart.js, adjust barPercentage of xAxes

Data label is getting hidden in pie(simple donut) chart.Not adjusting with-in the given space

I am trying to fit in the dynamic text on to the pie chart (donut) with fixed width and height. The data labels with connector are not getting aligned within the specified boundaries which are 550w x 208h. The number of data labels are fixed to be 4.
I have tried the following:
Increase/decrease distance of connector.
Increase/decrease connector-padding.
Increase/decrease the radius of the chart.(Wont fit for all the texts).
I have tried to use css in the formatter of the function which uses html with word-wrap. Have specified the width in plot options as well.
The second data label is getting cut.

Dates are overlapped in Highchart's areachart

I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/

HighCharts FORCE pointInterval (from user selection), pointPixelWidth and pointPadding(in pixels)

I have a candleStick and Column(volume) chart. I want the user to pick the interval (1m, 3m, 5m, 15m) etc.
The problem i am having is i cannot correctly set the point padding in pixels so the spacing will either vary between the different intervals (pointPadding is represented as a percent of the interval width on the axis). This screws up the chart as you change intervals.
As an additional problem, if highcharts own datagrouping calculates the total points in the plotArea based on the width of the plot (in pixels) and the width of the points. If this is off by one pixel my volume/column chart loses it's last points depending on how it determines the grouping.
It is strange because setting the column and candle pixelPoint widths the same for each gives different results as well.

Categories