Good evening. I am working on learning Vue.js and I want to make a basic charting website to practice and build skills. I am trying to customize my GChart.
Current chart: 1.
The first thing I am aiming to do is to customize the background color. The next thing I am looking to do is get rid of the label on the side, and lastly, although the chart says "you" above it that is not the chart's name. This is my code:
import { GChart } from "vue-google-charts";
export default {
name: 'HelloWorld',
components: {
GChart
},
computed: {
myStyles () {
return {
position: 'relative',
}
}
},
data () {
return {
chartData: [
['You', 'Percent'],
['Cute', 100],
],
chartOptions: {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
}
#chart{
padding:5px;
width:60%;
margin:auto;
background-color:rgb(241, 241, 129);
}
#actualChart{
margin:auto;
height:300px;
width:230px;
background-color:rgb(241, 241, 129);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="chart">
<h1>You</h1>
<div id="actualChart">
<GChart
type="PieChart"
:data="chartData"
:options="chartOptions"
:styles="myStyles"
/>
</div>
</div>
I have tried looking online and at the documentation but they either don't show it in Vue.js or they just show how to create a chart but not customize it. If there is a better way to chart in Vue, I am open to trying it. I eventually plan on allowing the user to submit data to create the chart and potentially pull data from an API. Thank you for taking the time to read this, and maybe answering it!
The possible options for a PieChart can be found here.
For your use case it would be:
{
"chartOptions": {
"title": "Your Title",
"backgroundColor": "#00cc00",
"legend": "none"
}
}
Also check the following resource, available in the README.md file of the npm package.
Related
I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.
This is the template code
<div v-for="card in cards" #click="toggleCard(card)" :key="card.id">
<transition name="flip">
<div
v-bind:key="card.flipped"
v-html="card.flipped ? card.back : card.front"
></div>
</transition>
</div>
and the script code
export default {
name: "FlipCard",
data() {
return {
cards: [
// cards here
],
};
},
methods: {
toggleCard: function (card) {
const isFlipped = card.flipped;
this.cards.forEach((strategy) => {
strategy.flipped = false;
});
isFlipped === true ? (card.flipped = false) : (card.flipped = true);
},
},
};
and css code:
.flip-enter-active {
transition: all 2s ease;
}
.flip-leave-active {
display: none;
}
.flip-enter,
.flip-leave {
transform: rotateY(180deg) !important;
opacity: 0;
}
can anyone help why in vue cli project the transition is so fast or maybe not applying?
Thank you in advance
The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.
Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.
-enter and -leave are now -enter-from and -leave-from.
Im using Gridsome frame work for VUE JS
I am navigating to a new page by using this.$router.push(PATH, PARAMS)
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})
The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:
it should be an object (which is what VALUE is set to) i.e.
I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?
gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -
Is this the issue?
Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?
Any help would be amazing here - please let me know if you need any further information.
Thanks -
W
UPDATE BASED ON CURRENT ANSWERS:
I have already added props:true to the component as shown below, but the issue is still present.
CODE SNIPPET - SUMMARY:
User clicks on the SectionTitle component, this then emits the page link
(each of the SectionTitle is a object from : sections array of Object)
To see the current online version of this please look at
wtwd.ninjashotgunbear.com
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/>
</div>
<PageTransition :dataObj="transitionObj"/>
</Layout>
</template>
<script>
import SectionTitle from '#/components/SectionTitle.vue';
import PageTransition from '#/components/PageTransition.vue'
export default {
metaInfo: {
title: 'Hello, world!'
},
components: {
SectionTitle,
PageTransition
},
data(){
return {
// data to be passed to the components
sections: [
{
sectionTitle: 'Clients',
sectionLink: 'clients',
sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
backgroundColor: '#F08080',
titleColor: '#E65454'
},
{
sectionTitle: 'Projects',
sectionLink: 'projects',
sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
backgroundColor: '#20B2AA',
titleColor: '#11DACF'
},
{
sectionTitle: 'Skills',
sectionLink: 'skills',
sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
backgroundColor: '#A921B2',
titleColor: '#CA14D6'
},
{
sectionTitle: 'About Me',
sectionLink: 'aboutme',
sectionSubTitle: `"My joruney becoming a developer so far"`,
backgroundColor: '#FFFFFF',
titleColor: '#D1D1D1'
},
{
sectionTitle: 'Contact Me',
sectionLink: 'contactme',
sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
backgroundColor: '#2185B2',
titleColor: '#0076AB'
}
],
divText: null,
transitionObj: null
}
},
methods:{
reRoute(value){
// 1)A) - change the text of the div to say the section it is being moved to
this.divText = value.sectionTitle
this.transitionObj = value
// FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
let centerPos = window.scrollY+(window.innerHeight/2)
// Apply secific Title color - and center possitioning
document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
// this.$router.push(value.sectionLink)
}, 700)
}
}
}
</script>
<style lang="scss">
// **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass
// Universal Font being used - LEMON MILK
#font-face {
font-family: LemonMilk;
src: url('../assets/fonts/LemonMilk.otf');
}
* {
box-sizing: border-box;
}
.navs {
font-family: LemonMilk;
}
.SectionTitle{
cursor: pointer;
}
</style>
Pass name rather than path in this.$router.push()
this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})
You should add props:true to the route definition :
{
path:'/thepath/:theParam',
component:SomeComponent,
props:true
}
I tried to use Chart.js in Vue through vue-chartjs. Also, I used [chartjs-plugin-datalabels][1]. Currently, I can toggle a chart by clicking the "Show a chart" button.
I could see values for each label in the chart. But, I couldn't customize the data labels.
[StackOverflow]
How to properly use the chartjs datalabels plugin
ChartJS: datalabels: show percentage value in Pie piece
Show values on top of bars in chart.js
[The plugin's Github Page]
https://github.com/chartjs/chartjs-plugin-datalabels/issues/10
https://github.com/apertureless/vue-chartjs/issues/410
[JS Fiddle]
https://jsfiddle.net/simonbrunel/mo5y35yg/
https://jsfiddle.net/simonbrunel/0jhffwfd/
Even after reading information above, I couldn't make mine work.
I would greatly appreciate any advice of solving this problem. Thanks! :)
Some of my code is the following:
<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";
export default {
name: "App",
components: {
PieChart
},
data() {
return {
isHidden: false,
chartData: {
labels: ["Green", "Red", "Blue"],
datasets: [
{
backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
data: [1, 10, 5]
}
]
},
options:{
plugins: {
datalabels: {
color: 'white',
textAlign: 'center',
font: {
weight: "bold",
size: 16
}
}
}
}
}
}
};
</script>
Please check out the entire code here :
https://codesandbox.io/embed/xy4x07q0o.
You need to bind options to pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>
Checkout demo here https://codesandbox.io/s/5kvll0xqyl
I am using vue-chartjs to render graphs on a webapp. I know you can print charts if you are using the original library. However I have no idea on how to do it with the vue version of the library.
I have my charts variable on an external charts.js file
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
Then on my component template I have:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button #click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>
Any help would be appreciated.
The answer is: Yes, it is. Your print method in the components' script could be:
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}
You can also add this to your component's style:
#media print{
#page {
size: landscape
}
}
vue-chartjs is based on chart.js and not canvas.js, thus it does not have a "build-in" way of printing.
You have to do it with some custom logic and the native javascript printing functions.
You can however grab the canvas element inside your chart component and generate for example an image and then print that image.
It will get a bit tricky, because you only have access to the canvas inside your chart component. So you will need to maybe wait for an event or prop to trigger the toDataURL call and then emit the image to your parent component where you can print it. If you want to trigger the print in your parent component.
methods: {
print () {
// grab the canvas and generate an image
let image = this.$refs.canvas.toDataURL('image/png')
// Emits an event with the image
this.$emit('chart:print', image)
}
}
In your parent component:
<template>
<your-chart #chart:print="handlePrint"
<template/>
....
...
methods: {
handlePrint(image) {
const win = window.open('', 'Print', 'height=600, width=800')
win.document.write(`<br><img src='${image}' />`)
win.print()
win.close()
}
}
It seems like the library is based on chartjs not canvasjs https://www.chartjs.org/docs/latest/ you might want to look into how to print a window Quick Print HTML5 Canvas, and remember you have access to the canvas element where your graph is drawn:
methods: {
printChart() {
const canvasEle = this.$el.querySelector('canvas');
//now your chart image is on canvasEle
},
}
If you are not against using export to pdf format, you can implement this task using jsPDF library, for example:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
</div>
</template>
<script>
import jsPDF from 'jspdf'; //for PDF printing
methods: {
pdfThatThing : function(){
//Default export is a4 paper, portrait, using milimeters for units
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Header", 20, 20); //at x,y at def.units 2cm
//chart element
let canvasEle = document.getElementById('total_visits_chart_bar');
let chartURL = canvasEle.toDataURL(); //transform path
//a4 page is 209mm, adds at 4cm top, 2cm left, for 15cm in size
doc.addImage(chartURL, 'PNG', 20, 40, 150, 150 )
doc.save(pdfName + '.pdf');
},
}
</script>
There is also option to auto show print dialog in pdf viewer:
doc.autoPrint({variant: 'non-conform'})
In my index.js file I have manually override the Vuetify theme object with my company's color:
Vue.use(Vuetify, {
theme: {
primary: '#377ef9',
secondary: '#1b3e70',
accent: '#ff643d',
error: '#ff643d'
...
}
Now, I can use these colors from my templates like so:
<my-text-field name="input text"
label="text"
value="text text text text..."
type="text"
color="primary">
</my-text-field>
What I'm after is using the primary or any other variable in the theme object defined above, inside my template style:
<script>
import { VTextField } from 'vuetify'
export default {
extends: VTextField
}
</script>
<style scoped lang="stylus">
label
color: <seconday color> <-- this is what I'm after
color: #1b3e70 <-- this works, but not quite good enough for me
</style>
I can easily just write the hex value of my colors in the style section, but I don't want to repeat myself, and would rather use my theme object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.
Edit (2018/10/11)
Since version 1.2. we can enable CSS variables
NOTE: allegedly it won't work in IE (Edge should work), and possibly some Safari versions?
From docs (see Custom Properties)
Enabling customProperties will also generate a css variable for each
theme color, which you can then use in your components'
blocks.
Vue.use(Vuetify, {
options: {
customProperties: true
}
})
<style scoped>
.something {
color: var(--v-primary-base)
background-color: var(--v-accent-lighten2)
}
</style>
For custom values e.g.
yourcustomvariablename: '#607D8B'
use --v-yourcustomvariablename-base (so base is default).
Original answer:
There is a Feature Request on github: Access theme colors in stylus files
#KaelWD (one of devs) wrote:
This is something you'll have to implement yourself. I've tried doing
something similar before but it doesn't really work on a framework
level.
Issue is labeled wontfix
Edit (2018/10/11)
Also see this updated thread:
https://github.com/vuetifyjs/vuetify/issues/827 (Feature request: Native css variables)
There is a way to go around this by utilizing :style attributes. It can be used to set custom CSS properties reactively.
Add a computed property:
computed: {
cssProps () {
return {
'--secondary-color': this.$vuetify.theme.secondary
}
}
Bind style to cssProps:
<div id="app" :style="cssProps">
Then, in your style:
<style scoped>
label
color: var(--secondary-color);
</style>
Adapted from this discussion: https://github.com/vuejs/vue/issues/7346
For anyone stumbling over this from Vuetify V2 onwards, you can do the following to get access to the SCSS colour variables.
// Import the Vuetify styles somewhere global
#import '~vuetify/src/styles/styles.sass';
// Now in your components you can access the colour variables using map-get
div {
background: map-get($grey, lighten-4);
}
All the colours can be found in /node_modules/vuetify/styles/settings/_colors.scss.
From above answers, if you want to include all vuetify colors, put this code in App.vue template
<v-app :style="cssProps">
App.vue script
computed: {
cssProps () {
var themeColors = {}
Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
})
return themeColors
}
}
Let say if you have this color in vuetify.js
export default new Vuetify({
treeShake: true,
theme: {
themes: {
light: {
darkRed: "#CD3300",
}
}
}
})
Then, in any component:
<style scoped>
.label {
color: var(--v-darkRed);
}
</style>
Maybe I am late the most efficient way to do is as mentioned in the docs https://vuetifyjs.com/en/features/theme/#custom-properties
I will provide a working example for the same.
you need only three changes to be done for this to get working.
Mention the option which does the magic and your theme color
export default new Vuetify({
theme: {
options: {
customProperties: true
},
themes: {
light: {
primary: "#3DCFD3",
secondary: "#171b34",
accent: "3D87E4"
}
}
}
});
Mention the class name in the tag where you want your theme to get applied
<h4 class="blue-header">Yash Oswal</h4>
CSS to apply your theme.
<style lang="scss">
.blue-header {
color: var(--v-primary-base);
}
</style>
For vutify 3+:
inside vuetify.js file declare theme color variable colors:{green:'#00ff00'}
// src/plugins/vuetify.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
export default createVuetify({
theme: {
defaultTheme: 'myCustomTheme',
themes: {
myCustomTheme: {
dark: false,
colors: {
..., // We have omitted the standard color properties here to emphasize the custom one that we've added
green: '#00ff00'
}
}
}
}
})
inside .vue component file use rgb(var(--v-theme-green)):
<template>
<div class="custom-class">background color with appropriate text color contrast</div>
</template>
<style>
.custom-class {
background: rgb(var(--v-theme-green))
}
</style>
Example of switching theme (helpfull link):
<v-app :dark="setTheme"
:style="{background: $vuetify.theme.themes[theme].background}"
>
JS:
computed: {
setTheme() {
this.$vuetify.theme.dark = this.goDark;
}
},
data() {
return {
goDark: false
}
}