I would like to know how can I set the width of a single column - If I have several columns the width of each one of them looks fine but when i have only one column it looks very wide.
Thanks,
Ron
here is my example chart- all I want is to be able to define the width of this single column:
Apart from suggested pointWidht, you should set pointRange
You can also affect the column width by setting the x axis scale.
If you set a max x value as if there were mulitple columns, the width will adjust.
Doing this in conjunction with the pointRange will be very effective ways to control the width while maintaining proper ration to the axis - whereas the pointWidth option will over ride the relationship to the axis values.
Related
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
I'm using angular-chart.js (which uses Chart.js) to create a bar chart, there is also a table under this showing the same data.
The problem I am having is when I change the data being displayed, the Y axis labels change width and throw everything out of alignment, for example:
Chart and table aligned in the first picture, but when the data changes (max Y axis label 3 characters reduced from 4), it looks like the second picture.
I couldn't find anything in the chart.js docs, is there a way I can set a width for the Y axis labels globally?
Actually, I think I figured out a very basic and static way for setting the width.
In chart.js (version 1.0.2), line 1576:
this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) + 10 : 0;
I simply changed that to a static number, '93'.
this.yLabelWidth = 93;
I'm sure with a bit more tinkering I can call the width of the first cell in the table get them both to be the same.
I have a highcharts column chart(http://www.highcharts.com/docs/chart-and-series-types/column-chart) with almost morethan 13000 categories on x-axis i.e. i am using datehour axis and i have a bar at specific datehour. Let say i have to take pdf containing all the data, Is it possible? If so can i put extremes max value to 13000.
What is the max value that Highcharts support in case of SetExtremes, Source width and SourceHeight?
I can not fine these values on Highcharts website.
Thanks.
I'm using 'Highcharts' column chart (not stacked).
My graph presents a dynamic data, so I don't know how many columns I'm expecting. That's why I would like to set a minimum and maximum width to the columns - when there are a lot of columns, I want as many columns as possible to be shown on my chart without needing a scroll (so the column's width is equal the min width); when there are only a few columns, I would like the columns to be in a reasonable width and not to spread all over the chart (the max width).
I know I can set the 'pointWidth' property, but it's not quite what I'm looking for.
If you have any idea, I will be more than thankful.
TIA,
adi
The best option is to not set the pointWidth and just let highcharts work it out for you. Use the pointPadding option to specify the gap between columns, and highcharts will do the rest.
e.g. this fiddle shows the same chart rendering different numbers of points: http://jsfiddle.net/122k2x5s/
plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0,
Flot chart is repeating ticks on right Y axis when:
alignTicksWithAxis:1
I want to align both axes but hide repeated tick values.
http://jsfiddle.net/AUrfY/20/
Is there something in the API i have missed or i have to check thicks before painting and hide duplications.
Set the tickDecimals option to 2 to get reasonable labels for the right y axis (see this updated fiddle).
The label values are not really duplicated, but they are rounded so that they seem so.