amChart clustered-column-chart labels are not related with columns - javascript

I am using amchart5 with React and based on this demo decided to create clustered vertical chart.
if I give "500px" as width it would be like
width:"500px"
if I give "400px" or less it would be like
width:"400px" or less
as you see place of labels like 2021 or 2021 changed ...
so how can I fix this? I want to give differents width and it will work without this problem

Default gradiant size of this chart demo is big that's why labels would be hidden.
Added minGridDistance to my xAxis like this:
const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "x",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9,
minGridDistance: 20,
maxWidth: 150,
}),
tooltip: am5.Tooltip.new(root, {}),
})
);
and it solved!

Related

Highcharts Gantt - Set max height and scrollbar on yAxis

I'm doing a project using Highcharts Gantt, and I'm having a little trouble mastering it at the moment, especially the management of its height and Y axis.
Here Sandbox : https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx:334-352
Let me explain:
What I want to do is set a maximum height and use scrollablePlotArea to make the y-axis scroll, while keeping the X-axis header.
The problem is: if I define a minHeight in scrollablePlotArea, the Y axis cuts the events until the minimum height defined (see sandbox), if I increase minHeight, it will cut less events, but the number is dynamic, so impossible to put a fixed value...
My question is: How to define a maximum height, while keeping a Y scroll that displays all events, While not changing the line height?
I tried several possibilities with the documentation, but nothing works...
I hope I made myself understood...
Thank you very much for your help.
This problem is a bug in Highcharts Gantt and it is similar to this issue: https://github.com/highcharts/highcharts/issues/13884
As a workaround you can dynamically set minHeight for scrollable plot area, example:
let allowChartUpdate = true;
Highcharts.ganttChart('container', {
chart: {
animation: false,
scrollablePlotArea: {
minHeight: 450
},
events: {
render: function() {
if (allowChartUpdate) {
allowChartUpdate = false;
this.update({
chart: {
scrollablePlotArea: {
minHeight: ...
}
}
});
allowChartUpdate = true;
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/ywt2cmkn/
API Reference: https://api.highcharts.com/gantt/chart.events.render

Highcharts: Implement a second y-axis related to the first y-axis

For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter

How to resize this highchart graph?

I use this activity gauge highchart graph. But, when I resize it. The layout become a mess. In this fiddle, I change the height and width of the graph. But, the label is misplaced.
chart: {
type: 'solidgauge',
marginTop: 50,
width:700,
height:700
},
You must to update tooltip and stroke position according to you new chart width and height like this :
tooltip: {
...
positioner: function (labelWidth) {
return {
x: 350 - labelWidth / 2, // edited
y: 320 // edited
};
}
}
Updated fiddle

Data graph labels cut off on c3.js chart

I'm graphing some lines on a c3.js line chart, but the data label of the leftmost point is being cut off:
I've tried adding padding to the chart, but this just adds padding to the overall chart. What I need is some way to add some sort of padding to just the bar graph ticks.
Something that I've considered:
I've considered using the "transform" property:
.c3-texts .c3-text text {
transform: translate(10px, 0);
}
But moving the position of all the data labels to the right would end up causing the data labels on the right-hand side of the graph to get cut off.
Here's a simple example of labels getting cut off:
fiddle
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
],
labels: {
format: function(x){
return "Test Label"
}
}
}
});
Any help would be appreciated. Thanks!
#ksav pointed me in the right direction. I remember trying this before, but foolishly, I didn't think of putting decimal numbers. I had tried putting in the value 1, and it gave way too much padding, but doing the following worked perfectly:
axis: {
x: {
padding: {
left: 0,
right: 0,
}
}
}

Responsive meteogram (icons) highcharts

I did responsive Meteogram , but when the browser window is enlarged, the icons ( clouds, sun ) don't move. How to get around this ?
[http://jsfiddle.net/fsrqvn9f/2/][1]
You aren't telling the chart to move those items. You'll need to add a handler for the chart redraw event:
chart: {
renderTo: this.container,
marginBottom: 70,
marginRight: 40,
marginTop: 50,
plotBorderWidth: 1,
events: {
redraw: function () {
// remove chart annotations
meteogram.onChartLoad(meteogram.chart);
}
}
},
I didn't write the code to remove the annotations, but you'll need to implement that also. I'd reccommend adding them to a group, so you can remove them all at once.
http://jsfiddle.net/fsrqvn9f/4/
EDIT - Removing the icons.
Here's what you would do to remove the weather icons. You'll need to do something similar for the Wind arrows.
When you add the icons to the graph, add them in a named group. In this case I named the group weatherSymbols. highcharts will create you elements with the class highcharts-weatherSymbols (or 'highcharts-' + grouname). This way you can easily find these items to remove them later.:
// Create a group element that is positioned and clipped at 30 pixels width and height
group = chart.renderer.g('weatherSymbols')
.attr({
translateX: point.plotX + chart.plotLeft - 15,
translateY: point.plotY + chart.plotTop - 30,
zIndex: 5
})
Then removing them is as easy as:
events: {
redraw: function () {
// remove chart annotations
$('.highcharts-weatherSymbols').remove();
meteogram.onChartLoad(meteogram.chart);
}
}

Categories