I'm running into some issues trying to import the chartist library with my jspm Aurelia application. I've added all the necessary styles, but the chart is not displaying as expected in terms of colors and lines.
Here's the code snippet included in the attached() method in app.ts from the chartistjs homepage:
import * as Chartist from 'chartist';
export class App {
constructor() {}
attached() {
// Our labels and three data series
var data = {
labels: ['Week1', 'Week2', 'Week3', 'Week4','Week5', 'Week6'],
series: [
[5, 4, 3, 7, 5, 10],
[3, 2, 9, 5, 4, 6],
[2, 1, -3, -4, -2, 0]
]
};
// Setting options for the chart
var options = {
showPoint: false,
lineSmooth: false,
axisX: {
showGrid: false,
showLabel: false
},
axisY: {
offset: 60,
labelInterpolationFnc: function (value) {
return '$' + value + 'm';
}
}
};
new Chartist.Line('.ct-chart', data, options);
}
My app.html:
<template>
<div class="container">
<div id="chartist-chart" class="ct-chart"></div>
</div>
</template>
My Index.cshtml file:
<div aurelia-app="main">
<link type="text/css" rel="stylesheet"
href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</div>
The current look of my chart:
https://i.sstatic.net/xoe1k.png
However, it should ideally look like this:
https://i.sstatic.net/WEHL8.png
reference: