Declaring location of highchart bars on a chart? - javascript

I have highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks

Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.

Related

Fix space between columns and align labels on Highcharts

I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.
This is my fiddle: https://jsfiddle.net/q3atxr4c/1/.
I added pointPadding, borderWidth and groupPadding. None of these are working.
Is there a way for me to reduce space between the columns?
Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.
I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!
The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.
API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.grouping
Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping

Set second axis in proportion of first axis

I have a chart which contains two series, and each of them has its own yAxis. I need to automatically set the second axis maximum to 13.5% of the first axis maximum. For example, if the first axis goes from 0 to 100, then I want the second axis to go from 0 to 13.5 (No matter the second series value).
The only way I found to achieve this is to calculate the max of the first series, and then affect it to the max of the second axis. But this is not what I really want. See this JSFiddle.
My fiddle seems to work, but in reality, I am not calculating the second axis maximum in a good way, as I refer to the first series maximum and not the first axis maximum.
Does anyone knows a general way to set the max of an axis accordingly to the max of another axis ?
The linkedTo attribute from Highcharts axis is close to what I want, but I need to add a coefficient. I don't know how to proceed.
There is no default API function in Highcharts that would allow that.
If you want to get percentage of max of created axis, then you can get it in load event of chart (API: http://api.highcharts.com/highcharts#chart.events.load )or in callback (as in demo below). Next you will need to update second axis' max.
Example: http://jsfiddle.net/cg0c5tkd/
function(chart){
chart.yAxis[1].update({max: chart.yAxis[0].getExtremes().max * 0.135});
}

Google charts geochart - text values in colorAxis

I am trying to render Google Geochart chart on my page and it renders okay. The only problem with the chart is the scale (colorAxis). As far as I know, from the developers guide, user can put values and colors that should be available on the scale.
The problem is, that I can put there only number values and I would like to change the scale, so it contains four text values - "low, medium, hard, extreme".
Is there any way to change the 1-4 scale to text scale, so min and max values on the scale would be strings, not integers.
I've already tried to put strings in colorAxis.minValue and colorAxis.maxValue but then, chart just ignores that.
colorAxis.minValue and colorAxis.maxValue according to Google Charts documentation are used for:
If present, specifies a minimum value for chart color data. Color data
values of this value and lower will be rendered as the first color in
the colorAxis.colors range.
What you want to change is the legend of the chart. I tried some options, but the best thing i could manage is simply add a string before min and max values with the following option.
var options = {
legend: {
numberFormat: "test"
}
};
Jsfiddle example here.

Highcharts space usage

I have the following problem. If no max value is defined Highcharts always adds space at the end of the bar. To illustrate it I've attached a image. The blue area is the div the chart is inside and I want the bars with 100% end on the end of the blue area. I'm aware of it that I can achive this by setting max:1 on the axis but I'm looking for a dynamic approach since when I'm defining max it is fixed and if the maximum value in the Chart is 80% I again end up with unused space.
Thanks Sebastian
You should set max as 100 for yAxis, not 1.
EDIT:
set maxPadding as 0 and endOnTick as true
http://jsfiddle.net/Km8CK/4/
http://api.highcharts.com/highcharts#xAxis.maxPadding
http://api.highcharts.com/highcharts#xAxis.endOnTick
Set your maxPadding to 0, and endOnTick to false.
example: http://jsfiddle.net/Km8CK/6/
maxPadding:0,
endOnTick:false,

How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..
If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.
Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,

Categories