I create mutil chart (type=bar) using grouped_categories.
But label for group show not beautiful.
I using .reflow() or render(), but not work.
Tks.
https://i.stack.imgur.com/P5A52.png
That is a bug reported on grouped_categories plugin repository:
https://github.com/blacklabel/grouped_categories/issues/100
https://github.com/blacklabel/grouped_categories/issues/28
The workaround is to manually position the first label:
xAxis: {
labels: {
x: -4,
y: 7
},
categories: [...]
}
Live demo: https://jsfiddle.net/BlackLabel/gejbs6fr/
Related
Using Highcharts, I have implemented the basic bar chart and the legend on the bottom of this design. However, I am trying to figure out how to do the circles with the values.
Looking at annotations but this is not next to the point. Or somehow do a second legend?
Any advice on the best approach on this with highcharts would be appreciated.
You can create an annotation in any place on the chart. Example:
annotations: [{
labels: [{
shape: 'circle',
overflow: 'allow',
text: '1',
padding: 50,
point: {
x: 200,
y: 400
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8ucke60o/
API Reference: https://api.highcharts.com/highcharts/annotations.labels.point
I was using this https://www.highcharts.com/maps/demo/doubleclickzoomto as my application example and would like to ask how to remove the legend names (1, 10, 100, 1k)?
You can disable the labels in this way:
colorAxis: {
...,
labels: {
enabled: false
}
}
Live demo: https://jsfiddle.net/BlackLabel/2b0ngcsk/
API Reference: https://api.highcharts.com/highcharts/colorAxis.labels.enabled
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/
I have a chart that is feeded with positive and negative values, and I thought that it was working perfectly, but suddenly I realize that the columns are not printed when all values are negative....Is there anything I am doing bad??
Here is my code:
new Highcharts.chart('av2', {
chart: {
type: 'column',
height: 500,
},
series: [{
name: 'Direct Purchase',
data: [ { y: -1.82, name: 'DK' }, { y: -19.8, name: 'DL' }]
}]
});
Mixed Values: https://jsfiddle.net/zowcqz09/6/
All Negative Values: https://jsfiddle.net/zowcqz09/5/
Best Regards,
You can use the yAxis options as workaround - Fiddle
Definitely a bug in v6. Even the official demo doesn't render anything if you change it to all negative values. You can use v5 until that is fixed:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
Edit: Fixed in v6.0.1 (https://github.com/highcharts/highcharts/issues/7228).
Similar to this question: Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
Is it possible to have two xaxis, but instead of side-by-side or on top of each other, to have them alternate. i.e. first column is from axis0, second is from axis1
Yes, it is. Since you did not provide any code on what you had tried here is a basic example. Do something like:
yAxis: [{
min: 0,
title: {
text: 'Rainfall (mm)'
}
},{
min: 0,
title: {
text: 'Europe Site Rainfall (mm)'
}
}],
As far as alternating column to whatever axis you can handle that by how you add the series and what axis you assign them to.