svelte-fusioncharts
svelte-fusioncharts copied to clipboard
Can't change the theme or backgroundColor
If I take the Column chart with time axis example and change the theme or bgColor, it does not work:
<script>
import FusionCharts from "fusioncharts";
import Timeseries from "fusioncharts/fusioncharts.timeseries";
import SvelteFC, { fcRoot } from "svelte-fusioncharts";
fcRoot(FusionCharts, Timeseries);
let promise,
jsonify = (res) => res.json(),
dataFetch = fetch(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-chart-with-time-axis-data.json"
).then(jsonify),
schemaFetch = fetch(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-chart-with-time-axis-schema.json"
).then(jsonify);
promise = Promise.all([dataFetch, schemaFetch]);
const getChartConfig = ([data, schema]) => {
const fusionDataStore = new FusionCharts.DataStore(),
fusionTable = fusionDataStore.createDataTable(data, schema);
return {
type: "timeseries",
width: "100%",
height: 450,
renderAt: "chart-container",
dataSource: {
data: fusionTable,
chart: {
showLegend: 0,
theme: "zune", // <=== doesn't work
bgColor: "#ff0000", // <=== doesn't work
bgAlpha: "70", // <=== doesn't work
},
caption: {
text: "Daily Visitors Count of a Website",
},
yAxis: [
{
plot: {
value: "Daily Visitors",
type: "column",
},
title: "Daily Visitors (in thousand)",
},
],
},
};
};
</script>
<div id="chart-container">
{#await promise}
<p>Fetching data and schema...</p>
{:then value}
<SvelteFC {...getChartConfig(value)} />
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>