Adding vanilla js library to Nuxt - javascript

I'm trying to add Chartist library to existing NuxtJs project.
Below is a configuration I have:
> npm i chartist
~plugins/chartist.js:
import Chartist from 'chartist'
export default Chartist
nuxt.config.js:
module.exports = {
plugins: [{src:'~plugins/chartist.js', ssr:false}],
build: {
vendor: ['chartist']
}
}
index.vue:
<template>
<div>
<div class="ct-chart"></div>
</div>
</template>
<script>
import Chartist from 'chartist'
export default {
mounted(){
var chart=new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>
On the first attempt to open page nuxt returns an error:
ReferenceError: window is not defined
After page reload it always returns:
Error: render function or template not defined in component: anonymous
However no errors raising and chart is visible if open page from another page through VueRouter.
But here is another problem - chart is not shown as expected:
I guess this is due to lack of related css styles.
I would appreciate for any advise:
- how to correctly include Chartist (or any other vanilla js library)
- how to attach css related to js library
p.s. I know there are different chartist vue components, but I want to understand how to work with vanilla js libraries in nuxt.

Here below the only working variant which found for the moment:
<script>
import 'chartist/dist/chartist.min.css'
export default {
data() {
return {
chartist: null
}
},
mounted() {
this.chartist = require('chartist')
var z = new this.chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>

Related

ngx-charts - Line chart overlaps when i have single data and xAxisTicks defined #1789

I observed one issue with ngx-charts line chart, when i have single data point i.e
[
{
name: 'test',
series: [
{
name: 0,
value: 0,
},
],
},
]
Here is my html code:
#yAxisTicks = [0, 25, 50, 75, 100];
#xAxisTicks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
#colorScheme: any = { domain: ['red'] };
<ngx-charts-line-chart
#chart
[yAxisTicks]="yAxisTicks"
[xAxisTicks]="xAxisTicks"
[scheme]="colorScheme"
[xAxis]="true"
[yAxis]="true"
[results]="single"
[yScaleMax]="100"
[tooltipDisabled]="true"
[view]="view"
>
</ngx-charts-line-chart>
The xAxisTicks are scattered and looks somewhat like bellow,
Does anyone came across this issue? Are there any fix available without removing the [xAxisTicks]="xAxisTicks"?

Trouble setting options for radar chart on Quickchart.io

I'm trying to make a radar chart using quickchart.io. I accomplished the look I want on raw html, but for some reason, quickchart doesn't like it when it comes to radial option :(
{
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [
{
data: [5, 4, 3, 3, 5],
label: 'Dataset'
},
{
data: [5, 4, 5, 3, 2],
label: 'Dataset 2'
}
],
},
options: {
scales: {
r: [
{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
],
}
},
}
It looks like it's totally ignoring everything in options. As you can see, I want the chart always start from 0 and tick mark increased by 1. Here's the result of the code above:
https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20r%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%0A
Can anyone help me?
You are trying to use v3 syntax but you are using it incorrect, the scales dont use arrays anymore. You also have to specify to quickchart you are using v3 like so https://quickchart.io/chart?version=3&c=CHARTCONFIG
Correct scale config V3 for you:
scales: {
r:{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
}
Working url based on your sample:
https://quickchart.io/chart?version=3&c=%7B%0D%0A%20%20type%3A%20%27radar%27%2C%0D%0A%20%20data%3A%20%7B%0D%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0D%0A%20%20%20%20datasets%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0D%0A%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%7D%2C%0D%0A%20%20options%3A%20%7B%0D%0A%20%20%20%20scales%3A%20%7B%0D%0A%20%20%20%20%20%20r%3A%20%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7D%0D%0A%20%20%7D%2C%0D%0A%7D
quickchart.io defaults to latest Chart.js v2 according to their documentation. Therefore, your chart options need to be written as follows. Alternatively you can try to define the version parameter to explicitly tell quickchart.io to use Chart.js v3.
options: {
scale: {
ticks: {
suggestedMin: 0,
suggestedMax: 5,
stepSize: '1'
}
}
}
For further details about the latest Chart.js v2 radar charts, please consult https://www.chartjs.org/docs/2.9.4/charts/radar.html

I'm getting this error when fly over the chart: TypeError: Cannot read property 'lineWidth' of undefined

I'am using React 16 and I'm getting this error when fly over the chart: screen error
I reinstalled the library but the error is still there. Pleas anyone know what it is?
TypeError: Cannot read property 'lineWidth' of undefined
My Component:
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highstock';
const options = {
chart: {
type: 'pie'
},
title: {
text: 'Tableau de bord'
},
series: [
{
data: [1, 2, 1, 4, 3, 6]
}
]
};
class WidgetIndicator extends Component {
render() {
return (
<div className="widget-grid-content__indicator">
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
/>
</div>
)
};
}
export default WidgetIndicator;
That problem is a Highstock bug and it is reported here: https://github.com/highcharts/highcharts/issues/13868
As a workaround disable splitted tooltip and set at least an empty configuration object for marker inactive state:
tooltip: {
split: false
},
series: [{
data: [1, 2, 1, 4, 3, 6],
marker: {
states: {
inactive: {
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/09z8tcnq/

Vue - Calendar chart is not working in vue-google-charts

I am using vue-google-charts package to display google charts, but unable to use Calendar chart in it.
HTML Template:
<GChart
type="CalendarChart"
:data="chartData"
:options="chartOptions"
/>
Script:
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
chartData: [
['a','b'],
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ]
],
chartOptions: {
chart: {
title: "Red Sox Attendance",
height: 350,
}
}
};
}
};
It shows this error
Uncaught (in promise) TypeError: chartsLib.visualization[this.type] is not a constructor
at VueComponent.createChartObject (vue-google-charts.common.js:1)
at eval (vue-google-charts.common.js:1)
How to fix this issue? Thank you.
There seems to be :settings property to chart. Its working with that.
<GChart
:settings="{packages: ['calendar']}"
type="Calendar"
:data="chartData"
:options="chartOptions"
/>

Chartist.js add graph in a modal

I have a small problem using the library Chartist.js (Link). I'm able to reproduce a graph on the html pages but, when I try tu put in a bootstrap modal, the graph just squeeze to 1 pixel. Example of this can be found here: http://jsfiddle.net/qw2Lnqng/4/. I udnerstood that the problem is due to the fact that the graph doesn't know the available space. The same happens with the tab (Link). The solution with the tab is here: http://jsbin.com/bawofakogu/1/edit?html,js,output. The solution was to add this piece of code:
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
I have tried to do the same with the modal but without success. Can you please show me hot wo solve this problem?
Thanks All!
Ok I found a solution. You can update the chart after the modal begin show; by using this jQuery piece of code :
First of all, store your chart in a variable :
var yourchart = new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
Then with this code, you'll be able to update your chart to the new size of it's container :
$('#popOverlay').on('shown.bs.modal', function (e) {
yourchart.update();
});

Categories