I'm using highcharts and react-highcharts to display some graph in my application. Ideally I would like to color the area of the graph with some gradient, from the documentation and this example the option that I should add is this:
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}
},
I'm trying to replicate the same with the configuration of my graph but it doesn't work, the graph looks exactly the same as if there was no fillColor option added. Here's the config of my graph:
{
"title": {
"text": ""
},
"chart": {
"height": 500,
"animation": false,
"events": {}
},
"legend": {
"enabled": true,
"align": "center",
"verticalAlign": "bottom",
"useHTML": true,
"y": 15
},
"navigator": {
"enabled": true,
"adaptToUpdatedData": false,
"handles": {
"enabled": false
},
"outlineWidth": 0,
"maskFill": "rgba(0, 0, 0, 0)",
"series": {
"type": "areaspline",
"color": "#4572A7",
"fillOpacity": 0.05,
"dataGrouping": {
"smoothed": true
},
"lineWidth": 1,
"marker": {
"enabled": false
},
"data": [
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
],
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
]
]
},
"max": null
},
"rangeSelector": {
"enabled": true,
"inputEnabled": true,
"buttons": [
{
"type": "mtd",
"count": 1,
"text": "MTD"
},
{
"type": "ytd",
"text": "YTD"
},
{
"type": "month",
"count": 1,
"text": "1m",
"preventDefault": true,
"performancePeriod": "one_month"
},
{
"type": "month",
"count": 3,
"text": "3m",
"preventDefault": true,
"performancePeriod": "three_months_actual"
},
{
"type": "month",
"count": 6,
"text": "6m",
"preventDefault": true,
"performancePeriod": "six_months_actual"
},
{
"type": "year",
"count": 1,
"text": "1y",
"preventDefault": true,
"performancePeriod": "one_year_actual"
},
{
"type": "year",
"count": 3,
"text": "3y",
"preventDefault": true,
"performancePeriod": "one_year_actual"
},
{
"type": "all",
"text": "All"
}
],
"selected": 5
},
"credits": {
"enabled": false
},
"yAxis": {
"labels": {
"style": {
"color": false,
"fontSize": false
}
},
"plotLines": [
{
"value": 0,
"width": 2,
"color": "silver"
}
]
},
"xAxis": {
"type": "datetime",
"startOnTick": false,
"labels": {
"style": {
"color": false,
"fontSize": false
}
},
"max": null,
"events": {}
},
"plotOptions": {
"area": {
"fillColor": {
"linearGradient": [
0,
0,
0,
300
],
"stops": [
[
0,
"#333"
],
[
1,
"#444"
]
]
}
},
"series": {
"marker": {
"lineColor": "white",
"fillColor": "#203A4C",
"symbol": "diamond",
"radius": 3,
"states": {
"hover": {
"fillColor": "white",
"radius": 5
}
}
},
"compare": "percent",
"compareBase": 0
}
},
"tooltip": {
"crosshairs": true,
"dateTimeLabelFormats": {
"millisecond": "%b %e, %Y",
"second": "%b %e, %Y",
"minute": "%b %e, %Y",
"hour": "%b %e, %Y",
"day": "%b %e, %Y",
"week": "%b %e, %Y",
"month": "%b %e, %Y",
"year": "%b %e, %Y"
},
"headerFormat": "<strong>{point.key}<strong><br/>",
"split": true,
"valueDecimals": 2
},
"series": [
{
"id": null,
"name": "test",
"data": [
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
],
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
]
],
"lineWidth": 2,
"tooltip": {
"valueDecimals": 4
}
}
]
}
If I remove the plotOptions.area property nothing changes in the graph, what am I missing?
Notice that with your current data the error occurs in the console:
https://assets.highcharts.com/errors/15/
The fillColor feature works only for particular series - like area, pie, funnel, pyramid, arearange etc, so you need to define the type of the series that you want to implemnent.
Simplified demo: https://jsfiddle.net/BlackLabel/5r8gxh2b/
Related
I have treemap chart and it has two values Squadra2 with value of 13778.00 and Squadra1 with value of 16.00
Now when treemap renders it takes percentage difference between them and split them accordingly BUT now I ended up in situation where I need to be sniper precise in order to select Squadra1 with value of 16.00
As you can see in the picture
Is there a possibility to declare for example minimal width of Squadra1, and to disallow it to go under that value ( to remain clickable ) ?
Please let me know, thank you
{
"chart": {
renderTo:"container",
"backgroundColor": "#FFFFFF"
},
"colorAxis": {
"labels": {
"enabled": false
},
"tickLength": 0,
"gridLineWidth": 0,
"min": 0,
"max": 20,
"stops": [
[
-0.001,
"#ffffff"
],
[
0.5,
"#7cb5ec"
],
[
0.501,
"#7cb5ec"
],
[
0.499,
"#ffffff"
],
[
1,
"#434348"
],
[
1.001,
"#434348"
]
]
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#FFF"
}
},
"tooltip": {},
"series": [
{
"drillUpButton": {
"position": {
"align": "center",
"verticalAlign": "bottom"
},
"theme": {
"fill": "white",
"stroke-width": 1,
"stroke": "silver",
"r": 2,
"style": {
"fontSize": "12px"
},
"states": {
"hover": {}
}
}
},
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levelIsConstant": false,
"levels": [
{
"level": 1,
"dataLabels": {
"enabled": true
},
"borderWidth": 6,
"borderColor": "#FFFFFF"
}
],
"data": [
{
"id": "id_0",
"name": "Squadra1",
"parentName": "Squadra1"
},
{
"id": "id_0_0",
"name": "ACC",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 1,
"colorValue": 1.8117836848479765
},
{
"id": "id_0_1",
"name": "FEB",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 0,
"colorValue": 5.48633338681632
},
{
"id": "id_0_2",
"name": "MAG",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 8,
"colorValue": 3.4398769612396007
},
{
"id": "id_0_3",
"name": "PAM",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 7,
"colorValue": 2.775814171372472
},
{
"id": "id_1",
"name": "Squadra2",
"parentName": "Squadra2"
},
{
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 13778,
"colorValue": 13.595706940649173
}
],
"events": {},
"_colorIndex": 0
}
],
"subtitle": {
"text": "",
"align": "",
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
}
},
"title": {
"text": "",
"align": "",
"style": {
"color": "",
"fontWeight": "none",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none"
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
},
"position": {
"align": "",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"turboThreshold": 5000,
"colorByPoint": false
}
}
}
Link of fiddle
http://jsfiddle.net/3k5fmrut/2/
The easiest way to achieve it is to set a smaller value for Squadra2 and add an additional property with real value to point object that can be used in tooltip.formatter callback to present the real value in the tooltip. Check demo and code posted below.
Code:
data:
{
"id": "id_1",
"name": "Squadra2",
"realValue": 13778,
"parentName": "Squadra2"
}, {
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 137.78,
"colorValue": 13.595706940649173
}
tooltip.formatter:
tooltip: {
formatter: function() {
return this.point.realValue;
}
}
Demo:
https://jsfiddle.net/BlackLabel/trz96fy7/
You can define your own algorithm to build the treemap : Highcharts treemap series
You could choose an algorithm such that each element has a minimum width and height, and the biggest elements share the remaining space.
I am using AmCharts of stock type for displaying graph. The problem is that on mobile devices it consumes touch & does not scroll. I have set "panEventsEnabled": false. But it still consumes the touch and on desktop browser I am still able to pan the graph. I don't get why it is not disabling the panEvent.
Below is my chart object. panEventsEnabled=false is set in the end.
var chartObject = {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm",
"maxSeries": 250,
"groupToPeriods": [ "mm", "10mm", "30mm", "hh", "3hh", "DD", "3DD", "WW", "MM", "YYYY"]
},
"dataSets": [ {
"color": "#00e673",
"fieldMappings": [ {
"fromField": "close",
"toField": "value"
}, {
"fromField": "volumeto",
"toField": "volume"
} ],
"categoryField": "time"
}],
"balloon": {},
"panels": [ {
"showCategoryAxis": true,
"categoryBalloonEnabled": false,
"recalculateToPercents": "never",
"title": "Value",
"percentHeight": 60,
"stockGraphs": [ {
"id": "g1",
"title": Value,
"precision": 2,
"valueField": "value",
"type": "line",
"compareable": true,
"lineThickness": 2,
"balloonText": "close: [[value]]",
"fillAlphas": 0.6
} ],
"stockLegend": {
"valueTextRegular": ": [[value]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"precision": 2,
"valueField": "volume",
"type": "column",
"cornerRadiusTop": 2,
"fillAlphas": 1
} ],
"stockLegend": {
"valueTextRegular": "Volume: [[value]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "10mm",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorColor": "#ff0000",
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "top",
"dateFormat": "YYYY-MM-DD JJ:NN",
//"periodContainer":{},
"hideOutOfScopePeriods":false,
"inputFieldsEnabled": false,
"inputFieldWidth": 100,
"periods": [ {
"period": "mm", //histomin limit 60
"count": 60,
"minPeriod": "mm",
"label": "1H"
}, {
"period": "mm",//histomin limit 1440 //autogroup
"minPeriod": "mm",
"count": 1440,
"label": "1D"
},{
"period": "DD",//histohour limit 168
"count": 7,
"label": "1W"
}, {
"period": "MM",//histohour limit 744
"count": 1,
"label": "1M"
}, {
"period": "MM",//histoday limit 93
"count": 3,
"label": "3M"
},{
"period": "YYYY",//histoday limit 365
"count": 1,
"label": "1Y"
}, {
"period": "MAX",//histoday all
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": false,
"creditsPosition":"bottom-left",
"panEventsEnabled": false
},
};
Use the responsive plugin instead and override selectWithoutZooming.
"responsive": {
"enabled": true,
"rules": [{
"maxWidth": 800,
"overrides": {
"chartCursorSettings": {
"selectWithoutZooming": true
}
}
}]
}
Check an example here: https://codepen.io/team/amcharts/pen/80a7ccf3fb8d2c04d00ef9121ca0806c?editors=1010
Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );
You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.
I need a little help converting the below code to have series data built from values returned from a DB.
var options = {
"chart": {
"type": "column",
"zoomType": "xy",
"inverted": true
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data": [
[
"Today",
5
],
[
"This Week",
3
],
[
"Last Week",
4
],
[
"Last Month",
127
]
]
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": [
[
"Today",
2
],
[
"This Week",
2
],
[
"Last Week",
3
],
[
"Last Month",
20000
]
]
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data": [
[
"Today",
3
],
[
"This Week",
4
],
[
"Last Week",
4
],
[
"Last Month",
2
]
]
}
]
};
I've replace this with :
var data = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var barChart = $(function() {
$('#barChart').highcharts({
"chart": {
"type": "column",
"zoomType": "y",
"inverted": false
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data":data
}
]
});
});
but, all my columns contain the same values for each index
I may be looking at this all wrong, and perhaps my array needs to be something like:
data = ['Today',12,13,52],['This week', 123,3466,56]...etc
but this then fails to render the chart at all.
You are using the same data array values for each series, which is why they all look the same. I your first example, each series had a different set of data. To do this in the second, you should have a different data array for each series:
var data1 = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var data2 = [['Today', 5], ["This Week", 15], ["Last Week", 12], ["Last Month", 203]];
...
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data1
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data2
},
etc.
How can I stretch the Swiffy result (SVG) to fit the entire page? (I can't add attributes to the SVG element because it is not there, swiffy generates it)
My swiffy:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="runtime.js"></script>
<script>
swiffyobject = { "internedStrings": ["::::080f080f"], "tags": [{ "frames": [], "scenes": [{ "name": "Scene 1", "offset": 0 }], "type": 23 }, { "bounds": [{ "ymin": 0, "ymax": 25600, "xmin": 0, "xmax": 15360 }], "id": 1, "fillstyles": [{ "color": [-6174960], "type": 1 }], "paths": [{ "fill": 0, "data": [":::a:600ya360o:a:600Yc"] }], "flat": true, "type": 1 }, { "id": 1, "matrix": 0, "type": 3, "depth": 1 }, { "id": 2, "height": 608, "width": 608, "data": "data:image/png;base64,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\n+H88a48XWWKZOwAAAABJRU5ErkJggg\u003d\u003d", "type": 8 }, { "bounds": [{ "ymin": -6080, "ymax": 6080, "xmin": -6080, "xmax": 6080 }], "id": 3, "fillstyles": [{ "transform": "45184l::45184l080F080F", "bitmap": 2, "type": 6 }], "paths": [{ "fill": 0, "data": [":080F080Fa:160la160l:a:160Lc"] }], "flat": true, "type": 1 }, { "tags": [{ "id": 3, "matrix": "#0", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "781D335x335X781D931e727e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "397R5334d5334D397R926e341e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8865C9730e9730E8865C064f981d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "3204F5430f5430F3204F327f699d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7706H1598f1598F7706H674f539d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "4307J2640e2640E4307J964f511d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7870K9206c9206C7870K251g566d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7005L445v445V7005L513g704d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "0936M774c774C0936M723g909d", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "9333L997N997n9333L864g161e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "1149L4489C4489c1149L927g481e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7268J0394E0394e7268J888g804e", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "9071H1087F1087f9071H745g097f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8438F5462F5462f8438F520g330f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "7711D3007F3007f7711D233g477f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "8615B4023E4023e8615B911f526f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "337M9455C9455c337M591f471f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "457C803T803t457C302f318f", "type": 3, "depth": 1 }, { "type": 2 }, { "replace": true, "matrix": "#0", "type": 3, "depth": 1 }, { "type": 2 }], "id": 4, "frameCount": 20, "type": 7 }, { "id": 4, "matrix": "::::00q302k", "type": 3, "depth": 2 }, { "bounds": [{ "ymin": 2918, "ymax": 25600, "xmin": 0, "xmax": 15360 }], "id": 5, "fillstyles": [{ "color": [-10507490], "type": 1 }, { "color": [-4072357], "type": 1 }, { "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":360o340la360O043ja:217ca360o:a:260Mc"] }, { "fill": 1, "data": [":485j146da:18db37D7N76I7Sa88I1Ca81Gia81Gia36Jaa37JAa9Pfb2Rp9S1tbE5fE5saa86kba05gF86kbB1n2d5wb6d8i8o4qb5o6j4w8jba:b:b4h:5v7Ja98q58Ma3e5Db8bV9eVbe:jaa99d97pbn9d1d9gby0c0g2eb8dw9n0fb7h7c6m4ha2e:a99B70Jb4Q27F89B74Jb4C1M2J5Tb8F3G9R9Jb6EQ2JQbP:1Cbb3Fi1L5ea19O88ka66D56caF0Gal15Vac8Cbc7M6m9Mb5kC0rCb3c:4eaa62gxa61gra56osa57ooa46e:a:15ta94V80Ia8c7ra9b8pbi7f5d9jb3c8c9i6fb90j70d55p28gb9x3k09e3kbo:0c:b7hB6nYb7fY5k3Ha:25Xb8G3H1R3Zb6K2T5R88Bc"] }, { "fill": 2, "data": [":204h929ba:00ha6o:a:00Hc:55fKa5Kia9ChaQ8la8fMa9fFb8h:4m5eb5d4e5d1qa:9gb:5eL4jbM1e7C5hbY5c7F7eb0Dt1Jtb1F:1JTb0DU8F8EbZ9C8C7HbL1EL9Ja:12Da9O:a:21db:1s5i90bb5i1j79b1jb6r:82b3Jb7i1J7i04Ca:6Ib:4HW5NbW2F2F0Jb0D7C6I7Eb5ER2LRc:87Pka2y96fa1Lya7Lpa0d1na7p9Bb8fK0o6Cb1gW7l5Eb7e2C8i0Hb1d7D4f6Kbv6Fv0Pa:02Da9O:a:99caE6hbE8cR8fbO3c5C2ebVw7E9ca9V44Fc:68D:a:33ka9o:a:33Kc"] }], "flat": true, "type": 1 }, { "id": 5, "matrix": 0, "type": 3, "depth": 9 }, { "bounds": [{ "ymin": -4719, "ymax": 5010, "xmin": -4719, "xmax": 4720 }], "id": 6, "paths": [{ "data": [":a549Db26I:71Q58cb17H45c46N75ib30F29f75I45nb58C46h58C71qb:26i58c71qb45c16h75i46nb29f29f46n75ib45h57c71q57cb26i:71q57Cb16h46C46n75Ib29f30F74i46Nb58c45H58c71Qb:25I58C71Qb45C16H74I45Nb30F30F46N75Ib46H58C71Q58Cc:81l16ob91e0y47j05gb55d56d05g47jb9y11f9y81lb:70f9Y82lb0Y90e05G46jb56D56d47J06gb11F9y81L9yb70F:82L9Yb91E0Y47J06Gb55D56D05G46Jb9Y12F9Y82Lb:70F9y81Lb0y91E05g47Jb56d55D47j05Gb12f9Y82l9Yb70f:81l9yc"], "line": 0 }], "flat": true, "linestyles": [{ "joint": 2, "color": [-6174960], "cap": 1, "width": [340], "miter": 10 }], "type": 1 }, { "tags": [{ "id": 6, "matrix": "::::549d549d", "type": 3, "depth": 1 }, { "type": 2 }], "id": 7, "frameCount": 1, "type": 7 }, { "id": 7, "matrix": "::::230d429l", "type": 3, "depth": 10 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6669, "xmax": 6858 }], "id": 8, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":763f567cb8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 8, "matrix": 0, "type": 3, "depth": 12 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 12 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6348, "xmax": 6858 }], "id": 9, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":442f567cb8C:7Fzb7B7b7B3fb:6c7b1fb9bz7fzb0d:7fZb8bY8b1Fb:6C8B3Fb7BZ7FZc:21c:b8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 9, "matrix": 0, "type": 3, "depth": 13 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 13 }, { "bounds": [{ "ymin": 3567, "ymax": 3743, "xmin": 6027, "xmax": 6858 }], "id": 10, "fillstyles": [{ "color": [-1], "type": 1 }], "paths": [{ "fill": 0, "data": [":120f567cb8C:6Fzb7B7b7B3fb:6c7b1fb8bz6fzb9c:8fZb7bY7b1Fb:6C7B3Fb9BZ8FZc:22c:b8C:7Fzb7B7b7B3fb:6c7b1fb9bz7fzb0d:7fZb8bY8b1Fb:6C8B3Fb7BZ7FZc:21c:b8C:6Fzb8B8b8B3fb:5c8b1fb8bz6fzb9c:7fZb8bY8b1Fb:6C8B3Fb8BZ7FZc"] }], "flat": true, "type": 1 }, { "id": 10, "matrix": 0, "type": 3, "depth": 14 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 14 }, { "id": 9, "matrix": 0, "type": 3, "depth": 13 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 2 }, { "type": 4, "depth": 13 }, { "id": 8, "matrix": 0, "type": 3, "depth": 12 }, { "type": 2 }], "fileSize": 11203, "v": "5.2.0", "backgroundColor": -1, "frameSize": { "ymin": 0, "ymax": 25600, "xmin": 0, "xmax": 15360 }, "frameCount": 25, "frameRate": 24, "version": 15 };
</script>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 100%; height: 100%">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>
Try specifying width and height in pixels. This works for me. Also, you may need to remove the overflow style. If this works with your file then get the width and height of the page using JavaScript and apply to the swiffy container div