Develop Reference

Apex Charts dont resize properly when using Flexbox

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();

Problem injecting variable-pie chart with highcharts-export-server

I'm using Highcharts Export Server as a Node.js module to produce charts in PNG format. When I include a Variable Radius Pie Chart though, I get an error in the resulting File. The error is Highcharts error #17:
The requested series type does not exist.
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
The chart I'm using is part of the highcharts-more module, so the error makes sense. I even found docs that seemed to spell out my solution. Thre is a resources option where you can provide scripts for injection to your export. That page is here, but I'll include the important bit below:
-resources
{
"files": "highstock.js,highcharts-more.js,data.js,drilldown.js,funnel.js,heatmap.js,treemap.js,highcharts-3d.js,no-data-to-display.js,map.js,solid-gauge.js,broken-axis.js",
"css": "g.highcharts-series path {stroke-width:2;stroke: pink}",
"js": "document.body.style.webkitTransform = \"rotate(-10deg)\";"
}
files: A comma separated string of filenames that need to be injected to the page for rendering a chart. Only files with the extensions .css and .js are injected, the rest is ignored.
css: css inserted in the body of the page
js: javascript inserted in the body of the page
After some digging, I did find that I could pass this resource option as a JSON stringified object into my export parameters. So, I attempted to inject the remote version of highcharts-more.js.
const exportImagesBase64 = async(data, format = 'png') => {
HighchartsExport.initPool();
let resources = JSON.stringify({
files: "http://code.highcharts.com/highcharts-more.js"
});
let charts = data.map(chart => exportPromise({
type: format, //png
options: chart, //standard highcharts config object
resources //resources option to inject highcharts-more
}));
charts = await Promise.all(charts);
HighchartsExport.killPool();
return charts;
};
const exportPromise = (data) => {
return new Promise((resolve, reject) => {
HighchartsExport.export(data, (err, res) => err ? reject(err) : resolve(res));
});
};
Here is an example of what data might be equal to in the code above
[{
"chart": {
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"type": "variablepie",
"height": 300,
"width": 300
},
"title": {
"text": "Placement Breakdown",
"align": "left",
"x": 30,
"y": 30
},
"tooltip": {
"headerFormat": "",
"pointFormat": "<b> {point.name}</b><br/>Impressions: <b>{point.y}</b><br/>Clicks: <b>{point.z}</b><br/>"
},
"plotOptions": {
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {
"enabled": false
},
"showInLegend": true
}
},
"series": [
{
"minPointSize": 10,
"innerSize": "20%",
"zMin": 0,
"data": [
{
"name": "facebook",
"y": 13642,
"z": 357
},
{
"name": "instagram",
"y": 12920,
"z": 326
}
]
}
],
"credits": {
"enabled": false
}
}]
Since adding the resource options, I am still receiving the #17 Highcharts error. Am I thinking about this completely wrong? I can't find any more information out there about this, so I'm hoping someone has some knowledge to share.

The documentation for the variable pie chart type refers to highcharts-more.js as a requirement.
The actual requirement for this chart type appears to be modules/variable-pie.js. Using this additional resource instead should fix issues with "The requested series type does not exist" when exporting.

Force Highcharts to use my min and max

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

store the name of a function in a JSON file and later be able to load and call it from within a script?

That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}

Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.

AngularJS debugging in template

In my AngularJS Controller I got
var test = {
"type": "pie",
"theme": "light",
"data": dataWantedArea,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"autoMargins": false,
"marginLeft": 5,
"marginRight": 5,
"marginBottom": 5,
"marginTop": 5,
"pullOutRadius": 0,
colors: ["#36CB1F", "#F58426", "#F53E26"],
"export": {
"enabled": true
}
};
in my template I do
<am-chart ng-if="test.data.length" id="test" options="test" width="90vw" height="325px"></am-chart>
Problem: its never shown, obviously test.data.length is ALWAYS false - so I would like to print some debugging in my template, is that possible somehow?
Of course If you know a direct solution to my problem, feel free to answer.

If you want to use data or variable from controller to html, you have to use $scope.
Use $scope.test intead of var test

To debug your code there is a cool browser plugin available.
http://ng-inspector.org/
There you can see a tree and all your values. It's very helpful to debug your code. You can see your scope and you can find and see problems.