Develop Reference

How can I add double related x-axis bar to high chart in zoom

Below is the custom xAxis bar I want to implement.
When user is doing a selection highchart will zoom accordingly and also datetime format x-axis would also zoom in & out accordingly.
Which option should I use?

You can use two linked datetime x-axis with enabled zoom and different tick interval:
chart: {
zoomType: 'x'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30,
linkedTo: 0
}]
Filling label backgrounds will be harder to achieve, but this thread should help: How can i create Highchart xAxis labels centered and enclosed?
Live demo: http://jsfiddle.net/BlackLabel/ot6g0fvj/
API Reference: https://api.highcharts.com/highcharts/xAxis

Chart JS: Set Spacing Between Ticks on Y-Axis

I am building a line chart using ChartJS. I want to increase the spacing between the vertical tick marks on the Y-Axis. Here is a slice of the relevant options being passed to ChartJS. Is there a property in the ticks section that will allow me to increase the spacing between the ticks, thereby increasing the total height of the chart canvas?
lineChartOptions = {
scales: {
yAxes: [
{
id: 'y-axis-0',
position: 'left',
ticks: {
... // <-- WHAT OPTION GOES HERE?
}
},
Note: It is not an option to simply decrease the height of the canvas using CSS, the canvas stretches to fill the space thereby distorting the chart.

If not much different data you can use this to set range
//EXAMPLE DATA [533,743,612,983]
ticks: {
beginAtZero: false,
stepSize: 100,
max: 1000
min: 500
}

How do I set a bar chart to default to a suggested maximum in chart.js v1.01?

I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?

Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>

Incorrect data point value in highcharts navigator series when extending min and max date

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});

Maximum bar width in Highcharts column charts

I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: highcharts.com/demo/column-basic
Thing is, sometimes there are 30 bars in the chart, sometimes only two. Where then are two really wide bars in the chart, it looks really weird, so the decision was made to set a maximum width for the bars. That way if there are only two then they wouldn't get wider than, say, 50px, but if there were 50 then Highcharts could size them in the way it sees fit.
So my problem is that Highcharts doesn't have a way to explicitly set the maximum width of the columns. Has anyone found a solution to that?

Obviously this question was asked a long time ago when this feature didn't exist, but as of Highcharts 4.1.8 you can do this without any workarounds using the plotOptions.column.maxPointWidth setting:
$('#container').highcharts({
/* Other chart settings here... */
plotOptions: {
column: {
/* Here is the setting to limit the maximum column width. */
maxPointWidth: 50
}
}
/* Other chart settings here... */
});
Below is the JSFiddle of the basic column chart example, modified to show this working:
http://jsfiddle.net/vu3dubhb/
And the documentation for this setting is here: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

Update: As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.
For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.
Basically:
Check the current bar width.
If it is greater than desired, reset the series' pointWidth.
Force a redraw to make the change visible.
Something like:
var chart = new Highcharts.Chart ( { ... ...
//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series = chart.series[0];
if (series.data.length) {
if (series.data[0].barW > MaximumBarWidth) {
series.options.pointWidth = MaximumBarWidth;
/*--- Force a redraw. Note that redraw() will not
fire in this case!
Hence we use something like setSize().
*/
chart.setSize (400, 300);
}
}
See the demo at jsFiddle.

Ultimate solution is to wrap drawPoints and overwrite shaperArgs of each point, especially x-position and width:
(function(H) {
var each = H.each;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
each(this.data, function(point) {
point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
point.shapeArgs.width = width;
});
}
proceed.call(this);
})
})(Highcharts)
Use:
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
And live demo: http://jsfiddle.net/83M3T/1/

a better way would be has suggested
http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width
check this fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/
just add
series: {
pointWidth: 20
}
in you plot options and thats it . :) enjoy cheers ...

function(chart){
var series = chart.series[0];
//--- Enforce a Maximum bar width
if (series && series.data.length) {
if (series.data[0].pointWidth > MaximumBarWidth) {
for(var i=0;i< chart.series.length;i++)
chart.series[i].update({
pointWidth:MaximumBarWidth
});
}
}
}
http://jsfiddle.net/pXZRV/40/

I used the spacingTop attribute to enforce a maximum pointWidth on a bar chart:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You could do the same with spacingRight and would have a consistent Chart without ugly spaces between the bars.

In my case, setting pointRange to 1 was what I needed. If a category with a box was adjacent to a category without a box (only outliers in a scatter series) the box would be wider than the category.
There is a good explanation here.

I faced the same issue using HighCharts and this is how I fixed it !!
-- Create a wrapper div for the chart, with some minimum width and overflow:auto. (To enable horizontal scroll)
-- Set the "pointWidth" of each bar to the required value. (say, pointWidth: 75)
-- Now set the chartWidth dynamically, based on the number of bars.
Use chartWidth = (number of bars) * (pointWidth) * 2
So, if you have 15 bars, chartWidth = 15*75*2 = 2250px, where 2 is used to create larger chart width, to accommodate spacing between bars.
--In this manner, You can have any number of bars of same width in the scrollable chart ... :)