I'm exploring vue-chatjs and I'm having struggles to find out how to use the different properties.
For example, I've located this structure in chart.js:
export interface LegendOptions<TType extends ChartType> {
/**
* Position of the legend.
* #default 'top'
*/
position: LayoutPosition;
labels: {
/**
* Text alignment
*/
textAlign?: TextAlign;
}
}
Here i'm trying to adjust the textalign property, doing it like so in vuejs 2 with vue-chartjs:
return {
responsive: true,
maintainAspectRatio: true,
locale: "sv",
plugins: {
legend: {
position: "right",
labels: {
textAlign: "left",
},
},
},
};
here however, i can only seem to move the position.
So my question is: how can I adjust those properties and where can I find how to do it? I tried to look at vue-chartjs source code but it seems like it just passes the entire object to chartjs.
my build:
vue2
typescript
Related
I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.
I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});
read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles
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 have a dynamic chart that allows the user to switch between pie, bar and line charts (in the full deployment the user can switch Ajax data as well).
The export to PDf is causing me some issues. I can adjust the font size and style on the pie chart using:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
}
}
}
However, when I export a bar chart, the xAxis font size is still to large.
I tried:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
},
xAxis: [{
labels: {
style: {
fontSize: '7px'
}
}
}]
}
}
Which altered the font size beautifully, unfortunately it removed all my custom xAxis labels and replaced them with numbers.
I have a fiddle https://jsfiddle.net/spencerplanton/dr0au6kg/5/
Which allows you to see the issue.
I apologise in advance for the slightly verbose nature of the example, but it has been lifted from several sources and a much larger dynamic chart application.
Any help formatting the PDF export bar chart axis font size would be greatly appreciated.
Kind regards
The options for arrays are overwritten. You need to set:
exporting: {
...,
chartOptions: {
...,
xAxis: [{
type: 'category',
labels: {
style: {
fontSize: '7px'
}
}
}]
},
}
Live demo: https://jsfiddle.net/BlackLabel/ryn5p20q/
API Reference: https://api.highcharts.com/highcharts/exporting.chartOptions
I genere a donut chart using chartjs and clivuejs.
My problem is depending on the chart the external label can be truncate or not.
Using "inspect" chrome mode I tried to amend the width/height of the canvas and of different parent div without.
//../src/DoughnutChart.js
import {
Doughnut,mixins
} from 'vue-chartjs'
export default {
extends: Doughnut,
mixins: [mixins.reactiveProp],
props: ['chartData'],
data() {
return {
options: {
tooltips: {
enabled: true
},
pieceLabel: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'inside'
},
responsive: true,
legend: {
display: false,
position: 'top',
},
scaleLabel : {
display: true
},
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartdata, this.options)
}
}
As you can see on attached file, external labels are not visible at all or truncate.
EDIT:
Using padding advise provided by Daniel (thanks Daniel)I have now the following. Event if the chart is very small I still have the issue. Is there any way to force the label to have a smarter position based on parent canvas ?
I have a Rally SDK 2.0p5 app that displays a chart. When the user selects an option, the data will be updated and I would like to refresh the chart. But instead of redrawing, it will place a new chart beneath. What is the proper syntax?
// Configure and Add the chart
this.add(
{
xtype: 'rallychart',
height: 400,
id: 'chart',
chartConfig: {
chart: {
},
title: {
text: 'My Chart',
align: 'center'
},
xAxis: [
{
categories: ['M0','M1','M2','M3','M4','M5'],
title: {
text: 'Interval'
}
}
],
yAxis: {
title: {
text: yText
}
},
series: [ { type: 'column',
name: yText,
data: mCount } ],
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
}
}
);
You need to remove the 1st chart before adding the new one.
redrawChart: function() {
this.remove('#chart');
this.add({...});
}
It's often better to just update the chart in place. HighCharts is the charting library that's included in the App SDK. HighCharts will even animate your changes. Cool!!! Look here for the list of methods that operate on charts. You can add series, change data, change axis limits, control the zoom, etc.