I have data like this:
Js Fiddle
xAxis: {
max: length < 10 ? length-1 : 10,
scrollbar: {
enabled: length < 10 ? false : true
},
type: 'category',
style:{
fontSize: '11px',
}
},
I have tried this to show scroll bar on x-axis if my max size exceeded but this not worked for me. Can you help me out to show the scroll bar if the max size is exceeded?
reference:Js fiddle scroll
Not exactly the above scroll normal scroll bar also help me out.
You can make scrollbar.enabled option dependent on data.length in the below way.
Please note that the scrollbar feature is only available in Highstock.
scrollbar: {
enabled: data.length < 10 ? false : true
},
Live demo: https://jsfiddle.net/BlackLabel/pe7kcsjL/
API Reference: https://api.highcharts.com/highstock/scrollbar.enabled
Related
I want to create highcharts with auto scroll in axis and moving on every 5 seconds.
I also hide the x-axis scroll bar. It is hide by scrollbar enabled : false.
My fiddle is : http://jsfiddle.net/kj63cL1v/
xAxis: {
type: 'category',
max: 6,
scrollbar: {
enabled: true
},
tickLength: 0
},
Create an interval after a chart is generated and call setExtremes method. Example:
setInterval(() => {
const xAxis = chart.xAxis[0];
xAxis.setExtremes(xAxis.min + 1, xAxis.max + 1);
}, 5000);
Live demo: http://jsfiddle.net/BlackLabel/5yha7xwv/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Using this example from Highcharts for displaying grouped column chart with negative values
https://www.highcharts.com/demo/column-negative
When we have less attributes in x-axis, the distance between both bars of the same value becomes wider. Can we reduce this distance by using any option & make the two bars look close to each other for each month. Attaching output with question.
Sample chart
Options I am using are:
plotOptions: {
column: {
dataLabels: {
enabled: false
},
pointWidth: 15
},
series: {
centerInCategory: true
}
},
Using the groupPadding and pointWidth property you can adjust the space between the grouped columns.
plotOptions: {
column: {
dataLabels: {
enabled: false
},
groupPadding:0.35,
pointWidth: 25
}
},
API:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.pointWidth
Live demo:
https://jsfiddle.net/BlackLabel/kfwz7gce/
I am getting image from highchart server to add into my pdf. But when I eport an column chart the column bars are coming at below the x-axis and not on the axis itself. Below is demo url
https://jsfiddle.net/ztcv2rhj/6/
Highcharts.chart('column-container-print',{
chart: {
animation: false,
type: "column",
marginLeft: 80
},
credits:false,
title:{
text: "Top 5 Questions"
},
subtitle: false,
yAxis: {
allowDecimals: false,
min: 0,
} ,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: ["Are the characters clear and readable? Keyboards should be kept clean. If characters still can't be read, the keyboard may need modifying or replacing. Use a keyboard with a matt finish to reduce glare and/or reflection.","Does the keyboard tilt? Note, the tilt need not be built in.","Does the user have good keyboard technique?","Is it possible to find a comfortable keying position? Try pushing the display screen further back to create more room for the keyboard, hands and wrists. Users of thick raised keyboards may need a wrist rest.","Is the keyboard separate from the screen?"],
labels: {
rotation: -45
},
},
series: [{"name":"No","data":[1,1,1,1,1]}]
});
This issue occurs because you are providing chart.options as options to export. Instead, you should provide chart.userOptions.
Code:
var optionsStr = JSON.stringify(chart.userOptions);
var dataString = encodeURI('async=true&type=jpeg&scale=4&options=' + optionsStr);
Demo:
https://jsfiddle.net/BlackLabel/6mw03r7c/
HIGH CHARTS
Please look at JSFIDDLE. Here the bars overlap each other. How to prevent this by resizing the bar width dynamically.
If happens because you set bar width with fixed value. If you want bars to take all available place for width, instead of using pointWidth, set pointPadding to 0, groupPadding to 0 and borderWidth to 0.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth
Example:
http://jsfiddle.net/yek6g5vy/
If possible remove container inline css height.
Fiddle Demo
Or you can use scrollbar using highstock.js
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
allowDecimals: false,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Fiddle demo
I have folowing setup:
scrollbar: {
enabled: true,
},
and
xAxis: {
min:0,
max:10,
...
Its all fine I if a have more than 10 records that are being displayed. If I get less than 10 records I get this result.
when I click on the scroll bar I get the right chart.
Is the any solution for this problem, and can I hide the scroll bar if there less then 10 records available?
Get your var length = data.length; before creating chart and set max: length < 10 ? length : 10