I get this error while trying to make vue-chartjs work
WARN in ./node_modules/vue-chartjs/es/BaseCharts.js
"export 'default' (imported as 'Chart') was not found in 'chart.js'
And also this in devtools:
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
Steps to recreate:
Create nuxt app with: $ yarn create nuxt-app <project_name>
Add vue-chartjs with $ yarn add vue-chartjs chart.js
Add following code which should work according to vue-chartjs docs
~/components/BarChart.js
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
props: ['data', 'options'],
mounted() {
this.renderChart(this.data, this.options)
},
}
~/pages/index.vue
<template>
<div class="container">
<div>
<bar-chart
:data="barChartData"
:options="barChartOptions"
:height="200"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
barChartData: {
labels: [
'2019-06',
'2019-07',
'2019-08',
'2019-09',
'2019-10',
'2019-11',
'2019-12',
'2020-01',
'2020-02',
'2020-03',
'2020-04',
'2020-05',
],
datasets: [
{
label: 'Visits',
data: [10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],
backgroundColor: '#003f5c',
},
{
label: 'Pages Views',
data: [30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],
backgroundColor: '#2f4b7c',
},
{
label: 'Users',
data: [45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],
backgroundColor: '#665191',
},
],
},
barChartOptions: {
responsive: true,
legend: {
display: false,
},
title: {
display: true,
text: 'Google analytics data',
fontSize: 24,
fontColor: '#6b7280',
},
tooltips: {
backgroundColor: '#17BF62',
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
},
},
],
},
},
}
},
}
</script>
<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
#apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
I am also using tailwindcss in the project and other nuxt project options were Axios, Git, ESlint, Prettier.
Chart.js has a new release version with 3.0.x. I think, vue-chartjs does not support it yet.
You can downgrade chart.js and try again.
ChartJS [3.0.1 - Published 2 days ago]
https://www.npmjs.com/package/chart.js?activeTab=readme
And there is a vue-chartjs issue about 22 hours ago.
https://github.com/apertureless/vue-chartjs/issues/695
chart.js version above 3.0.0 is not compatible, you need to downgrade chart.js
npm install chart.js#2.9.4
This has solved my issue
maybe its a bit late but I have to give the answer,
what you need is to change the version of both libraries
npm install chart.js#2.7.1 vue-chartjs#3.4.0 --save
it works fine in vue2
yarn add vue-chartjs chart.js#2.9.4
if you are using yarn
Related
I'm working on a react app that uses MUI. We've been developing things within the "light" mode pallet, but would like to add the ability to switch things to a "dark" mode pallet. This change should affect only the colors defined within the pallet and not any of the other css/styling overrides.
I've done by best to understand the documentation and have looked at several different examples that I've found online, but none seem to show how to do this when your theme has more than just pallet. And including another pallet object gives a warning in the console, but I'm convinced there's a way to do this without reverting to just copying and pasting the components and typography parts of the theme to the dark version of the theme. Here's our current theme:
import { createTheme } from "#mui/material/styles";
export const appTheme = createTheme({
palette: {
mode: "light",
neutral: {
main: "#72ccda",
one: "#ffffff",
two: "#f5f5f5",
},
primary: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
info: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
},
typography: {
fontFamily:
'"Ubuntu", "Segoe UI", "Roboto", "Droid Sans", "Helvetica", "Arial", sans-serif',
},
components: {
MuiCssBaseline: {
// "normal" scss styling goes here and will override any MUI stuff
styleOverrides: `
.hidden {
display: none;
visibility: hidden;
},
.json {
width: 34vw;
min-wdith: 400px;
max-width: 800px;
height: 40vh;
min-height: 100px;
max-height: 450px;
overflow: scroll;
}
`,
},
},
});
export const darkTheme = createTheme({
palette: {
mode: "dark",
neutral: {
main: "#72ccda",
one: "#ffffff",
two: "#f5f5f5",
},
primary: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
info: {
main: "#34afc2",
one: "#9edce5",
two: "#72ccda",
},
},
typography: {
fontFamily:
'"Ubuntu", "Segoe UI", "Roboto", "Droid Sans", "Helvetica", "Arial", sans-serif',
},
components: {
MuiCssBaseline: {
// "normal" scss styling goes here and will override any MUI stuff
styleOverrides: `
.hidden {
display: none;
visibility: hidden;
},
.json {
width: 34vw;
min-wdith: 400px;
max-width: 800px;
height: 40vh;
min-height: 100px;
max-height: 450px;
overflow: scroll;
}
`,
},
});
I'm using https://www.chartjs.org/. I want to make a chart like a picture.
enter image description here.
but created one is this. enter image description here
It is Sharing X-Axis but has Different Y-Axis by chart type. Left Y-axis is for bar, but the right one is for scatter.
I want the scatter values to be positioned according to each bar chart categories.
current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1a1a1a;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.8.0)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script>
const labels = ["label1", "label2", "label3", "label4", "label5"];
// setup
const data = {
labels: labels,
datasets: [
{
type: "bar",
label: "bar 1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack1",
},
{
type: "bar",
label: "bar 2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack2",
},
{
type: "scatter",
label: "scatter1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack1",
},
{
type: "scatter",
label: "scatter2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack2",
},
],
};
// config
const config = {
data,
options: {
scales: {
x: {
grouped: true,
},
leftY: {
grouped: true,
position: "left",
beginAtZero: true,
},
rightY: {
type: "linear",
position: "right",
beginAtZero: true,
stacked: true,
grouped: true,
},
},
},
};
// render init block
const myChart = new Chart(document.getElementById("myChart"), config);
</script>
</body>
</html>
I have configured a bar chart using the jQuery Flot library. This is the code:
<style>
.flot-chart-bar {
height: 300px;
}
.flc-bar {
font-size: 2px;
border: 1px grey solid;
}
<div class="card profilestats" style="color: #fff !important;">
<div class="card-content" style="background-color: #bdbdbd !important;min-height:320px;">
<div id="bar-tipoReclamo" class="flot-chart-bar"></div>
<br>
<div class="flc-bar" style="background-color: white; "></div>
</div>
<div class="card-action" style="background-color: #757575 !important;;">
<span>Distribuzione Tipi di Reclamo negli ultimi 3 anni</span>
</div>
And this is the bar:
$.plot($("#bar-tipoReclamo"), barData, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
valueLabels: {
show: true
},
xaxis: {
ticks: [[0,currentYear-2],[1,currentYear-1],[2,currentYear]]
},
legend: {
container: '.flc-bar',
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: " %y,%s " ,
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Now the question is pretty simple: how can i reduce the font size of the words inside the legend? I already tried using CSS and using some of Legend attributes that i found online but nothing seems to work.
Bar with Legend
I want to reduce the font of the words inside the white legend under the bar.
The CSS you have should work, but font-size: 2px; is probably not what you want.
See this fiddle for a full example based on your code where the font-size is specified in the CSS.
I am trying the reduce the font-size using [titleFontSize: 12..] and various combinations. but not working.
same i used for [valueFontSize: ..] & [labelFontSize: ..]
How can i change the font-size of Title,Value & Labels?
Code:
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js">
<script type="text/javascript">
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: 12,
titlePosition: "below",
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
label: "Mbps",
lableFontSize: "10px",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
</script>
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: "5px",
titlePosition: "below",
valueFontFamily: "Georgia",
valueFontSize: "5px",
label: "Mbps",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
#divDownloadOuter {
width: 50%;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
<div id="divDownloadOuter">
<div id="jgDownload"></div>
</div>
JSFiddle: Link
Try with titleMinFontSize. It will work.
titleMinFontSize: 20,
Check this link for other attributes.
Solution using CSS:
/* Title */
#jgDownload text:nth-child(6) tspan{
font-size: 0.8em !important;
}
/* Value */
#jgDownload text:nth-child(7) tspan{
font-size: 0.5em !important;
}
/* Label */
#jgDownload text:nth-child(8) tspan, #jgDownload text:nth-child(9) tspan, #jgDownload text:nth-child(10) tspan{
font-size: 0.9em !important;
}
Check this link with Example: https://jsfiddle.net/amitshahc/gf0gm69j/5/
To get it working with justGage v1.2.2 I used the following:
/* Value */
#jgDownload > svg:nth-child(1) > text:nth-child(6) {
font-size: 0.8em !important;
}
(the 'text:nth-child' value dictates which element to change, i.e. text:nth-child(8) and text:nth-child(9) represents the labels)
Be gentle on me as this is my first post!
I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.
What it does in document mode IE8:
When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)
My JS:
$(function () {
var chart;
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 200
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
layout: 'vertical'
},
credits: {
enabled: false
},
title: {
margin: 30,
style: {
color: '#6e685c',
fontSize: '10px'
}
},
tooltip: {
pointFormat: 'Aantal: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size:'100%',
dataLabels: {
enabled: true,
color: '#454545',
format: '{point.y}',
distance: 10
}
}
}
}
$(document).ready(function () {
// Build the chart
options.title.text = 'Financieel fout';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-1').highcharts(options);
// Build the chart
options.title.text = 'Financieel onzeker';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-2').highcharts(options);
// Build the chart
options.title.text = 'Service desk';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-3').highcharts(options);
// Build the chart
options.title.text = 'Controle';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-4').highcharts(options);
});
$("body").width($("body").width()-200).delay(1000).width($("body").width()+200);
});
The HTML:
<div class="row">
<div class="col-md-6 graph-container border-right">
<h4>Rechtmatigheid</h4>
<div class="clearfix">
<div id="graph-1" class="col-md-6 no-horizontal-padding"></div>
<div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div>
</div>
</div>
<div class="col-md-3 graph-container border-right no-horizontal-padding">
<h4 class="padding-left">Kwaliteit</h4>
<div class="graph-container">
<div id="graph-3" class=""></div>
</div>
</div>
<div class="col-md-3 graph-container no-horizontal-padding">
<h4 class="padding-left">Workload</h4>
<div class="graph-container">
<div id="graph-4" class="no-horizontal-padding"></div>
</div>
</div>
</div>
And the CSS
/***************************************************************/
/* GRAPHS */
/***************************************************************/
.graph-container{
}
.graph-container.border-right{
border-right: 1px solid #e5e5e5;
}
.graph-container .graphs-info{
margin: 20px 0px;
}
.graphs-info{
color: #6e685c;
line-height: 26px;
}
.graphs-info .content-title{
font-size: 17px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
.graphs-info .graphs-info-title{
display: inline-block;
margin-right: 6px;
}
.graphs-info .error{
color: #830020;
}
.padding-left{
padding-left: 20px !important;
}
Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)
Use comments in HTML for IE8, like this:
<!--[if IE 8]>
<style>...</style>
<![endif]-->
The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.