vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fix #5171: Improve Chart.js colors

pull/5134/head^2^2
Onur Senture 2024-01-29 16:22:29 +03:00
parent b2bc41fcda
commit 13e5910259
13 changed files with 124 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/chart/BasicDoc.vue
View File

@ -51,8 +51,8 @@ export default {
{
label: 'Sales',
data: [540, 325, 702, 620],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1
}
]
@ -122,8 +122,8 @@ const setChartData = () => {
{
label: 'Sales',
data: [540, 325, 702, 620],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246 0.2)'],
borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1
}
]
@ -190,8 +190,8 @@ const setChartOptions = () => {
{
label: 'Sales',
data: [540, 325, 702, 620],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1
}
]

18
doc/chart/ComboDoc.vue
View File

@ -49,7 +49,7 @@ export default {
{
type: 'line',
label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderWidth: 2,
fill: false,
tension: 0.4,
@ -58,7 +58,7 @@ export default {
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white',
borderWidth: 2
@ -66,7 +66,7 @@ export default {
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]
@ -139,7 +139,7 @@ const setChartData = () => {
{
type: 'line',
label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderWidth: 2,
fill: false,
tension: 0.4,
@ -148,7 +148,7 @@ const setChartData = () => {
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white',
borderWidth: 2
@ -156,7 +156,7 @@ const setChartData = () => {
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]
@ -223,7 +223,7 @@ const setChartOptions = () => {
{
type: 'line',
label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderWidth: 2,
fill: false,
tension: 0.4,
@ -232,7 +232,7 @@ const setChartOptions = () => {
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white',
borderWidth: 2
@ -240,7 +240,7 @@ const setChartOptions = () => {
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]

12
doc/chart/DoughnutDoc.vue
View File

@ -50,8 +50,8 @@ export default {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -101,8 +101,8 @@ const setChartData = () => {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -147,8 +147,8 @@ const setChartOptions = () => {
datasets: [
{
data: [300, 50, 100],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};

24
doc/chart/HorizontalBarDoc.vue
View File

@ -48,14 +48,14 @@ export default {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -133,14 +133,14 @@ const setChartData = () => {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -212,14 +212,14 @@ const setChartOptions = () => {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]

12
doc/chart/LineDoc.vue
View File

@ -50,14 +50,14 @@ export default {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4
}
]
@ -131,14 +131,14 @@ const setChartData = () => {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4
}
]
@ -206,14 +206,14 @@ const setChartOptions = () => {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4
}
]

24
doc/chart/LineStylesDoc.vue
View File

@ -51,7 +51,7 @@ export default {
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
borderColor: documentStyle.getPropertyValue('--cyan-500')
},
{
label: 'Second Dataset',
@ -59,15 +59,15 @@ export default {
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
borderColor: documentStyle.getPropertyValue('--orange-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
backgroundColor: 'rgba(107, 114, 128, 0.2)'
}
]
};
@ -141,7 +141,7 @@ const setChartData = () => {
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
borderColor: documentStyle.getPropertyValue('--cyan-500')
},
{
label: 'Second Dataset',
@ -149,15 +149,15 @@ const setChartData = () => {
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
borderColor: documentStyle.getPropertyValue('--orange-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
backgroundColor: 'rgba(107, 114, 128, 0.2)'
}
]
};
@ -225,7 +225,7 @@ const setChartOptions = () => {
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
borderColor: documentStyle.getPropertyValue('--cyan-500')
},
{
label: 'Second Dataset',
@ -233,15 +233,15 @@ const setChartOptions = () => {
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
borderColor: documentStyle.getPropertyValue('--orange-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
backgroundColor: 'rgba(107, 114, 128, 0.2)'
}
]
};

12
doc/chart/MultiAxisDoc.vue
View File

@ -49,7 +49,7 @@ export default {
{
label: 'Dataset 1',
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
yAxisID: 'y',
tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10]
@ -57,7 +57,7 @@ export default {
{
label: 'Dataset 2',
fill: false,
borderColor: documentStyle.getPropertyValue('--green-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
yAxisID: 'y1',
tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90]
@ -148,7 +148,7 @@ const setChartData = () => {
{
label: 'Dataset 1',
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
yAxisID: 'y',
tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10]
@ -156,7 +156,7 @@ const setChartData = () => {
{
label: 'Dataset 2',
fill: false,
borderColor: documentStyle.getPropertyValue('--green-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
yAxisID: 'y1',
tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90]
@ -241,7 +241,7 @@ const setChartOptions = () => {
{
label: 'Dataset 1',
fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
yAxisID: 'y',
tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10]
@ -249,7 +249,7 @@ const setChartOptions = () => {
{
label: 'Dataset 2',
fill: false,
borderColor: documentStyle.getPropertyValue('--green-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
yAxisID: 'y1',
tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90]

12
doc/chart/PieChartDoc.vue
View File

@ -48,8 +48,8 @@ export default {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -99,8 +99,8 @@ const setChartData = () => {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -145,8 +145,8 @@ const setChartOptions = () => {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};

36
doc/chart/PolarAreaDoc.vue
View File

@ -48,16 +48,16 @@ export default {
{
data: [11, 16, 7, 3, 14],
backgroundColor: [
documentStyle.getPropertyValue('--red-500'),
documentStyle.getPropertyValue('--green-500'),
documentStyle.getPropertyValue('--yellow-500'),
documentStyle.getPropertyValue('--bluegray-500'),
documentStyle.getPropertyValue('--blue-500')
documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--cyan-500')
],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
};
},
setChartOptions() {
@ -112,16 +112,16 @@ const setChartData = () => {
{
data: [11, 16, 7, 3, 14],
backgroundColor: [
documentStyle.getPropertyValue('--red-500'),
documentStyle.getPropertyValue('--green-500'),
documentStyle.getPropertyValue('--yellow-500'),
documentStyle.getPropertyValue('--bluegray-500'),
documentStyle.getPropertyValue('--blue-500')
documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--cyan-500')
],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
};
};
const setChartOptions = () => {
@ -170,16 +170,16 @@ const setChartOptions = () => {
{
data: [11, 16, 7, 3, 14],
backgroundColor: [
documentStyle.getPropertyValue('--red-500'),
documentStyle.getPropertyValue('--green-500'),
documentStyle.getPropertyValue('--yellow-500'),
documentStyle.getPropertyValue('--bluegray-500'),
documentStyle.getPropertyValue('--blue-500')
documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--cyan-500')
],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
};
},
setChartOptions() {

32
doc/chart/RadarDoc.vue
View File

@ -49,20 +49,20 @@ export default {
datasets: [
{
label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
borderColor: documentStyle.getPropertyValue('--gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--gray-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'),
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--pink-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
borderColor: documentStyle.getPropertyValue('--cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--cyan-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100]
}
]
@ -187,20 +187,20 @@ const setChartOptions = () => {
datasets: [
{
label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
borderColor: documentStyle.getPropertyValue('--gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--gray-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'),
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--pink-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
borderColor: documentStyle.getPropertyValue('--cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--cyan-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100]
}
]

18
doc/chart/StackedBarDoc.vue
View File

@ -49,19 +49,19 @@ export default {
{
type: 'bar',
label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34]
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]
@ -140,19 +140,19 @@ const setChartData = () => {
{
type: 'bar',
label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34]
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]
@ -225,19 +225,19 @@ const setChartOptions = () => {
{
type: 'bar',
label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--green-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
data: [21, 84, 24, 75, 37, 65, 34]
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32]
}
]

24
doc/chart/VerticalBarDoc.vue
View File

@ -48,14 +48,14 @@ export default {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -132,14 +132,14 @@ const setChartData = () => {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -210,14 +210,14 @@ const setChartOptions = () => {
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'),
backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--pink-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'),
backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]

12
doc/chart/pt/PTDoc.vue
View File

@ -82,8 +82,8 @@ export default {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -132,8 +132,8 @@ const setChartData = () => {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};
@ -155,8 +155,8 @@ const setChartData = () => {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
}
]
};