I'm making a website for school that involves a bunch of Google Visualizations. I can get them to work with the data I want, but I'm stuck customizing them. I have a very specific design I must follow, and it's not really working out at the moment.
The reason is that I don't know how to have two different styles on one element. For example :
legend: {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}},
legend: {position: 'bottom'},
This currently only positions the legend at the bottom. I'm trying to get these two in one line, but I don't know the proper syntax of the language (I've tried to find it online but to no avail. :( )
I've shuffled it around a few times like so
legend: {position: 'bottom'}, {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}},
or
legend: {position: 'bottom', {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}}},
Help ?
You are close with the format. You want one object with "position" and "textStyle" properties:
legend: {
position: 'bottom',
textStyle: {
color: '#d1dbbd',
fontName: 'Century Gothic',
fontSize: 15
}
}
Related
I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.
I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.
Has anybody else ever run into this and found a solution?
I have been using this site as a resource for years and never asked a question. I can't figure this one out.
The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to be able to display the legend.
Code snippets and screenshot of graph below:
<template>
<div class="standard_div">
<!-- Begin chart component of graph -->
<v-chart v-if="showChart" :options="chartOptionsBar"/>
<!-- End chart component-->
</div>
</template>
<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>
chartOptionsBar = {
xAxis: {
// The data for the series
data: this.xAxisSeries,
// Parameters for the x axis
name: this.x_axis,
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 20, 20, 20],
fontWeight: 'bold',
}
},
yAxis: {
// Parameters for the x axis
name: this.y_axis,
nameLocation: 'middle',
nameTextStyle:{
padding: [25, 25, 25, 25],
fontWeight: 'bold',
}
},
series: [
{type: 'line', data: this.yAxisSeries},
],
legend:{
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
width: '50%',
orient: 'horizontal',
lineHeight: '56',
padding: 25,
type: 'plain',
zlevel: 20,
data: ["item0"]
},
title:{
show: true,
text: this.graphTitle,
x: 'center',
textStyle: {
fontSize: 20,
}
},
};
The link includes an image of the graph that was produced from the options bar above.
I had the same problem and importing the legend using
import 'echarts/lib/component/legend'
in my component worked for me!
Try to play with positioning props
I'm using the vue-stripe-elements-plus NPM module and I can't see how to add a custom font?
This plugin uses the options you pass in to the first element you create for creating the VUE elements.
It passes the style object to the style option when Stripe creates elements.
It passes the elements property to Stripe's elements function.
In here you can add a CustomFontSource object.
Please note, as in this example, if you want to use a Google font, you have to go to the URL provided and grab the URL within the #fontface descriptors. You would probably be better of hosting the font yourself as I fear these URLs may change over time.
stripeOptions: {
elements: {
fonts: [{
family: 'Lexend Deca',
src: 'url(https://fonts.gstatic.com/s/lexenddeca/v1/K2F1fZFYk-dHSE0UPPuwQ5qnJy_YZ2ON.woff2)',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
style: 'normal',
weight: '400',
display: 'swap',
}],
},
style: {
base: {
color: 'red',
fontFamily: '"Lexend Deca", sans-serif',
fontSize: '18px',
fontWeight: '400',
fontSmoothing: 'antialiased',
},
},
},
Stripe components:
<card-number
:stripe="stripeId"
:options="stripeOptions"
/>
<card-expiry
:stripe="stripeId"
:options="stripeOptions"
/>
<card-cvc
:stripe="stripeId"
:options="stripeOptions"
/>
I'm building a link builder that lets people share multiple links from one link. At the moment I have several "cards" that users can put into their link template. For example, this allows them to have links to their music on Spotify (one card), or a link to their Youtube channel (another card).
I'm using VueDraggable to allow users to drag their cards into their template..
What I don't understand is, how should I store the cards components in the store so that they can be draggable? At the moment in my store I just have all of the cards as objects, as VueDraggable needs the data to be in 2 different lists..
export const state = () => ({
chosenCards: [
],
defaultCards: [
{id: 1, text: 'Twitter', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1DA1F2', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1DA1F2', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'Spotify', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1db954', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1db954', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Youtube', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#c4302b', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#c4302b', 'font-weight' : 600, font: 'Arial'}},
],
})
So I don't actually use any card components I've made. I want to be able to design the cards as components instead of just objects in my store, and still have them be draggable. How should I go about doing this?
I'm trying to set an array of components styles directly from the store, so that when the store changes, the design of each component changes too.
I store a set of links in my Vuex store like this:
links: [
{id: 1, text: 'Banana is a test', design: {color: 'red', 'background-color': 'blue', padding: '51px', margin: '5px', 'border-width' : '10px', 'border-color': 'blue', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'This is a test', design: {color: 'red', 'background-color': 'blue', padding: '20px', margin: '10px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Monkey is a test', design: {color: 'red', 'background-color': 'blue', padding: '5px', margin: '5px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
]
and this is how I try to render them
<a v-for="link in links" :key=link.id :href="link.destination" :id=link.id :style="link.design">
{{link.text}}
</a>
the trouble is, when the design objects changes in the Vuex store, the links styles are not subsequently updated as I would expect.
In my Vue component I've tried getting the links in different ways, assuming this would change the reactivity. Currently I get them using a computed method like so:
computed: {
getLinks: function() {
return this.$store.state.links
}
},
but whenever I change the value of a background-color, say from 'blue' to 'red', I have to reload the page to see the change. Do I need to force a rerender of the page everytime I call my mutation?
This is my mutation for reference:
setSelectedItemDesign (state, payload ) {
state.selectedItem.design[Object.keys(payload)[0]] = Object.values(payload)[0]
}
and I'd call it from my component like this:
this.$store.commit('setSelectedItemDesign', {'background-color' : this.rgbaValue})
Thats because you read value from store directly here return this.$store.state.links. This way it is not reactive and also anitpattern, because you should not access store like that.
You should create getter to get value and then it should be ok.
The problem was that I was not updating the array in my store in a way that Vue observes to trigger a view update, as nada correctly pointed out.
You can see here for more details: vuejs.org/v2/guide/list.html#Array-Change-Detection
I am using a teaching bubble inside a coach mark, same as the example in here
enter link description here
How can I have the teaching bubble in white instead of blue?
You can pass in the styles prop to the TeachingBubbleContent that contain this object:
{
closeButton: {
color: 'red',
selectors: {
':hover': {
background: 'gainsboro',
color: 'red'
},
':active': {
background: 'darkGray',
color: 'red'
}
}
},
content: {
border: '1px solid black',
background: 'white',
},
headline: {
color: 'black'
},
subText: {
color: 'black'
}
}
Example here in this codepen: https://codepen.io/vitalius1/pen/xoEPzg.
The only thing thing you can't do easily is to change the Coachmark's drop color in a way that is still visible. You can try by passing color prop to it and specify white, but because there is no border or shadow around the drop all you'll see is the beacon animation. And if you try give it a border it won't look nice (see codepen) because of how the drop is constructed. Also, there is currently a bug in passing the beaconColorOne and beaconColorTwo props to change the beacon color that I am fixing right now :)
Hope that helps!