Getting quite frustrated with highcharts. I have charts with 2 y axes. I want the zeros to be aligned for the chart to make sense. Highcharts doesn't have this functionality out of the box so I've built in my own logic to handle this, which calculates an appropriate min and max for both axes.
I use these calculated values to set config.yAxis.min and config.yAxis.max. Unfortunately highcharts tries to be smart and re-calculate new min and maxes. This is especially true when I resize the browser window.
I've looked everywhere and can't find a way to forcefully set min and max. Highcharts folks, is there no way to do this? Without this, charts with double axis become completely useless.
Here's a JSFiddle: jsfiddle.net/ashokraju/5c676o1j/8
It's possible if you use yAxis.tickPositions API like that :
"yAxis": [{
"id": "quantity",
"labels": {},
"title": {
"text": "Paying Customers",
"margin": 25
},
"max": 783,
"min": -401,
"opposite": false,
"gridLineColor": "#F7F6FC",
tickPositions: [-1000, -500, 0, 500, 1000, 1500]
}, {
"id": "ratio",
"labels": {
"format": "{value}%"
},
"title": {
"text": null
},
"max": 13450,
"min": -6725,
"opposite": true,
"gridLineColor": "transparent",
tickPositions: [-10000, -5000, 0, 5000, 10000, 15000]
}]
Fiddle
Edit :
You're calculating the min and max so maybe you will have to calculate the ticks too.
Try this:
"max":783,
"min":-401,
"startOnTick": false,
"endOnTick": false,
https://api.highcharts.com/highcharts/yAxis.endOnTick
The tick options force a series to start or end at the specified min/max values.
You can also try zero-align y-axes Highcharts plugin:
https://www.highcharts.com/products/plugin-registry/single/42/Zero-align%20y-axes
Related
I draw a default OHLC chart. Then add a simple scatter series to it.
I set chart level config to share tooltips.
tooltip: { shared: true }.
But two series won't share tooltips at all.
Another big problem is that I cannot control the mouse hover effect on the new series. If you try the demo below, after clicking the AddSeries button at the bottom, the newly added series will be highlighted on mouse hover. I try to remove the mouse over effect and control it with the lineWidthPlus parameter, but there is no effect on the newly added series. Can anyone shed some light on this?
"hover": {
"enabled": false
},
https://jsfiddle.net/2t7fg9rc/
What do you think about adding the line series instead of scatter? I cannot see the hover issue that you described while using the line series.
var seriesConfig = {
"data": [
[1557322200000, 50.72],
[1566999000000, 51.03],
[1577197800000, 70.73],
[1588858200000, 75.93],
[1601040600000, 108.43],
[1620394200000, 130.85]
],
"type": "line",
"id": "Indicator",
"name": "Indicator",
"yAxis": 0,
"color": "rgb(256,0,0,0.75)",
"marker": {
enabled: true,
"symbol": "circle",
"radius": "2"
},
"showInNavigator": false,
"showInLegend": true,
"states": {
"inactive": {
"opacity": 1
},
"hover": {
"enabled": false
},
"stickyTracking": false
}
};
Demo: https://jsfiddle.net/BlackLabel/hfzwd8Lc/
I'm woking with angularJS and npm package amcharts3 "^3.21.15". I'm having a little issue with logarithmic scale in my XY chart. This is my chart without logarithmic scale:
Working Chart without logarithmic scale
ValueAxes code:
"valueAxes": [{
//"logarithmic": true,
"minMaxMultiplier": 1.2,
"position": "bottom",
"axisAlpha": 0,
"title": "Grupos"
}, {
//"logarithmic": true,
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
]
When I activate both log scale, the chart just get blank:
Not working blank chart
And when I activate only one scale (X or Y), the chart still not showing the data, only the respective axes lines and values:
Not working chart showing only one axes information
And there's no error in browser console.
Could someone help me, please?
Thanks.
Logarithimic scale only supports positive, non-zero values and will break if you have data that doesn't meet this condition, which your working chart screenshot seems to show. For zero values, you can use the treatZeroAs property to remap those values to a small decimal value; negative values need to be removed:
"valueAxes": [{
"logarithmic": true,
"treatZeroAs": 0.01,
"minMaxMultiplier": 1.2,
"position": "bottom",
"axisAlpha": 0,
"title": "Grupos"
}, {
"logarithmic": true,
"treatZeroAs": 0.001
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
]
Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change.
Full code is here:
https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html
Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row.
And if I do resize (like 1mm) it will start working correctly.
Any idea what could be the problem?
In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the JS.
.apexcharts-canvas {
position: relative;
user-select: none;
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
}
/* scrollbar is not visible by default for the legend, hence forcing the visibility */
Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language.
You need to move all your scripts to the end instead of injecting in the HTML to allow the SVG Document parser to get the element's size correctly.
Working Codepen Example
var options = {
"chart": {
"height": 350,
"type": "line",
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
},
"autoSelected": "zoom"
}
},
"plotOptions": {
"bar": {
"horizontal": true
}
},
"dataLabels": {
"enabled": true,
"offsetX": -6,
"style": {
"fontSize": "12px",
"colors": [
null
]
}
},
"series": [{
"name": "People count",
"data": [
400,
430,
448
]
},
{
"name": "People death",
"data": [
450,
0,
200
]
}
],
"xaxis": {
"type": "category",
"categories": [
"2015",
"2016",
"2017"
]
},
"stroke": {
"show": true,
"curve": "straight",
"width": 2,
"colors": [
"#0000ff",
"#008000"
]
},
"legend": {
"position": "right",
"offsetY": 100,
"height": 230
},
"title": {
}
}
var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
options
);
chart.render();
I have an array of timestamps like [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450].
Here there are 3 values for 1485343314150, 2 values for 1485343314300 and 1 value each for 1485343314400 and 1485343314450
So while plotting on the graph
X = [1485343314150,1485343314300,1485343314400,1485343314450]
Y = [3,2,1,1]
I need a way to represent these X and Y such that Xs values are converted to a human readable datetime like 24-February 5:25 PM.
Can it be done via Chart.js or amCharts? I searched but couldn't find anything.
In AmCharts you can set parseDates to true in your categoryAxis (which is the same as the X axis) if you're using a serial chart (line, smoothed line, or column). AmCharts' XY chart can also handle dates as well by setting one of the valueAxes' type to "date", but the chart types available are limited to lines/bullets
When you enable parseDates, the chart will automatically format them to use readable date strings. You can adjust the format by specifying your own dateFormats array in the categoryAxis. You can find more information on that here.
Here's an example using a serial chart. Your data frequency is in incrments of milliseconds, so I set the categoryAxis' minPeriod to accommodate:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"timestamp": 1485343314150,
"value": 3
},{
"timestamp": 1485343314300,
"value": 2
},{
"timestamp": 1485343314400,
"value": 1
},{
"timestamp": 1485343314450,
"value": 1
}],
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "value"
}],
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff"
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can further format the axis' output through the dateFormats property as mentioned before. In this scenario, you'll want to change the string in the fff period. Depending on the amount of data, you may need to change the larger periods as well.
I've implemented a regular AmSerial Chart to visualise number of users using an app per month. The library, however seems to rescale by changing the min value on Value Axis to larger values as the highest value keeps increasing. What we want is to set Value axis' starting value to 0 and also be able to change the magnitude of increments along the axis, for example, [0, 1000,2000,...] or [0,5000,10000,...]
I've tried to look at the docs on their site and the only thing that let me customise Value axis was ValueAxesSettings, but it doesn't let me do the above.
For the record, ValueAxesSettings is a feature for Stock Chart product and is completely ignored by regular serial charts.
To set the scale to start from 0 for value axis, use its minimum setting.
As far as increments go, you have several options.
Option 1: Manipulate grid count
If you know the range of your values, you can set both minimum and maximum properties of the value axis, then set autoGridCount: false as well as gridCount so that range divides up into increments that you need.
For example, if you have a range of values from 0 to 1000 and want to display a label/grid line at every 1000, you could do something like this:
"valueAxes": [{
"minimum": 0,
"maximum": 10000,
"autoGridCount": false,
"gridCount": 10
}]
Option 2: Use guides
If you need absolute control over which labels are placed, you can disable value axis' labels (labelsEnabled: false) and grid (gridAlpha: 0) and use guides.
Those are horizontal lines with labels, placed at values you specify:
"valueAxes": [ {
"labelsEnabled": false,
"gridAlpha": 0,
"guides": [{
"value": 5000,
"label": "5000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 10000,
"label": "10000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 15000,
"label": "15000",
"inside": false,
"lineAlpha": 0.5
}]
} ]
The above will place lines and labels at values 5000, 10000 and 15000.