I'm currently facing the following problem:
I've created a simple line chart and filled it with example data.
But the tooltip doesn't show up.
I've tried using my config on the ECharts Website and there the tooltip is working.
option = {
title: {
text: 'Baum'
},
tooltip: {
trigger: 'item',
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
axisPointer:
{
label: {
show: true,
}
}
},
legend: {
data: ['lain', 'lain2']
},
xAxis:{
type: 'category',
data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [
{
name: 'lain',
type: 'line',
showSymbol: true,
data: [100,199,200,287,345,456,567,600,700,800],
smooth: true
},
{
name: 'lain2',
type: 'line',
showSymbol: true,
data: [111,158,231,296,374,495,596, 650,750,879],
smooth: true
}
],
animationDuration: 2000
}
}
In vue it's implemented like this:
<v-chart :options="option"></v-chart>
The data in the diagram itself is shown properly.
Thanks ahead.
I found a solution.
The import for the tooltip module has to imported explicitly.
import 'echarts/lib/component/tooltip'
With this import it's working.
Related
I want to put time data in x-axis labels in vue chart.js . There is a way in pure js code, not vue, but I can't find it in vue version.
Below is my code.
export default {
name: "LineChart",
components: {
LineChartGenerator,
},
props: {
chartId: {
type: String,
default: "line-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 280,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Array,
default: () => [],
},
},
data() {
return {
chartData: {
labels: "???",
datasets: [
{
label: "vacuum",
backgroundColor: "#534e7f",
data: this.$store.state.cnc1,
},
],
},
chartOptions: {
maintainAspectRatio: false,
},
};
},
};
I tried a lot of things similar to the one below but failed.
I also installed the extension but it failed.
scales: {
x: {
type: "time",
time: {
unit: "day",
},
},
},
I want to make something like this.
Most of the vue examples don't help by putting specific values in 'labels:' beforehand.
How can I get the value of the label in real time?
I tried putting time data into the store, but only the time when execution started is displayed.
Or like this...My head is a potato.Any help would be appreciated.
did you match label and data like this?
chartData: {
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
},
Does not work like this:
<template>
<Bar
:chart-options="chartOptions"
:chart-data="$attrs['chart-data'] || chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Bar } from 'vue-chartjs/legacy'
import 'chart.js/auto'
export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart',
},
datasetIdKey: {
type: String,
default: 'label',
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: '',
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Object,
default: () => {},
},
},
data() {
return {
chartData: {},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Custom Chart Title',
},
},
}
},
}
</script>
tried editing even with this: https://codesandbox.io/s/exciting-ully-2wst65?file=/src/components/Bar.vue
but nothing works.
All info gathered from: https://vue-chartjs.org/api/
Registration of components are not needed if you import auto.
maybe some ideas?
You are using v2 syntax in v3, the internal plugins like the tooltip, title, legend and decimation have been moved from the options namespace to the options.plugins namespace.
So you need to nest the title options in a plugins object within the options object. Then it will work
For those like me, who are looking for a solution using vue-chartjs V4.
To show the Title you need to pass the plugin object, for example:
plugins: {
type: Array,
default: () => [Title]
}
and then pass into the chartOptions props the title configuration, for example:
chartOptions: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: "Chart Title",
},
},
}
sandBox full example:
I have 2 questions:
Anyone knows how to make the search bar and label in one line? (red circle) Currently its 2 lines.
Preferably using the dom attribute, if possible. Or any other simple and quick method.
How to remove the space between table header and body? (yellow space). css, js methods are welcomed!
Here's my datatables initialization:
table = $('#serviceItemList').DataTable({
processing: true,
serverSide: true,
scrollResize: false,
scrollY: 300,
scrollCollapse: true,
paging: false,
info: false,
createdRow: function (row, data, dataIndex) {
$(row).attr('data-id', data.id);
},
dom: 'Bfrtip',
ajax: {
'url': "/serviceitem/list",
'type': "POST",
'data': function (data) {
data.zone = zone;
}
},
columns: [
{ data: 'checkbox', name: 'items[]' },
{ data: 'DT_RowIndex', name: 'DT_RowIndex' },
{ data: 'zone', name: 'zone', orderable: true, },
{ data: 'code', name: 'code', orderable: true, },
{ data: 'description', name: 'description', searchable: true },
],
select: {
style: 'multi',
selector: 'td:first-child'
},
});
you can try it by inspecting the element and look for its class name and then you can set the display property to none
and for the search bar do the same and set the float property to left
I am currently making a personal portfolio site using Nuxt.js (using TypeScript).
I decided I want to use Vanta.js Halo effect. for my landing page, but I can't seem to find a way to make it work properly.
I tried using three.js and vanta npm packages, but it produces an error.
'Cannot read property “texture” of undefined'
import * as THREE from 'three'
import HALO from 'vanta/dist/vanta.halo.min.js'
...
*inside Vue.extend block*
mounted(){
this.vantaEffect = HALO({
el: '#landing',
*rest of the settings*
THREE: THREE
})
}
Is there any way I can make it work?
Update:
I managed to get rid of the errors using static files - method from this vanta repo issue, but static script for initiating can't find the #landing element.
/*nuxt.config.js*/
...
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: 'vanta.halo.min.js' },
{ src: 'three.min.js' },
{ src: 'effect.js' },
],
},
...
/*effect.js - file that initializes the effect*/
VANTA.HALO({
el: '#landing',
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
baseColor: 0xffffff,
backgroundColor: 0x2d2d2d,
THREE,
})
Update 2:
I managed to fix the problem with not finding the #landing element by exporting a function that initializes the effect and running it from the mounted() and passing the element reference.
/*effect.js*/
const vantaEffect = (elementRef) => {
return window.VANTA.HALO({
el: elementRef,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
THREE: THREE,
})
}
export default vantaEffect
Now this error shows up:
[VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined
So, I fiddled a bit with the sandbox that Lawrence provided, and I was able to make it work like this: https://codesandbox.io/s/winter-thunder-pffsq
Basically what happens is that Vanta assumes that THREE is set on window, which doesn't happen when we import it from npm. So you must import Vanta after you import THREE and set it as a window variable.
import * as THREE from "three";
// import HALO from "vanta/dist/vanta.halo.min";
export default {
async mounted() {
// window is only avaiable on browser
if (process.browser) {
window.THREE = THREE;
const { default: HALO } = await import("vanta/dist/vanta.halo.min");
HALO({
el: "#abc",
mouseControls: true,
touchControls: true,
minHeight: 200.0,
minWidth: 200.0,
xOffset: -0.17,
size: 2.1,
THREE: window.THREE
});
}
}
};
I've implemented a Chart that needs to be populated after its creation.
Here is a snip of the object i created:
MyApp.views.chartPanel = new Ext.chart.Panel({
id: 'chartPanel',
title: 'Pie Chart',
items: {
cls: 'pie1',
theme: 'Demo',
store: null,
shadow: false,
animate: false,
insetPadding: 20,
legend: {
position: 'top'
},
.....
pass: function(id) {
MyApp.views.chartPanel.items.items[0].bindStore(getData(id));
}
The pass function is invoked and chart is populated but i cannot see the legend that is shown only if the users double-click on the window and resets the chart.
How can i correctly show the legend?
Add the following in your series config:
series: [{
type: 'pie',
....
showInLegend: true,
label: {
field: 'name'
}
}]