Related
I'm trying to bring my label content to the top and change the label flow color by column, but i still can't find a way, can you suggest or suggest me some ways.
this is my:
desired output
this is my code: I'm trying to custom lange but it's not working as i thought.
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.font.size = 16;
const labels = ["Cat", "Dog", "Monkey"];
const data = [89, 52, 70];
const barBgColor = ['#A0C8BB', '#B0C3E6', '#FFE38B', ]
var chartOptions = {
borderSkipped: false,
plugins: {
legend: {
display: false,
},
datalabels: {
display: true,
color: 'black',
anchor: 'end',
align: 'top',
offset: -30,
formatter: function(value, context) {
return value + '%';
}
}
},
barThickness: 55,
responsive: true,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "",
},
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: true,
beginAtZero: true,
},
},
y: {
display: true,
ticks: {
display: false,
beginAtZero: true,
stepSize: 30,
},
grid: {
color: '#9B9898',
drawBorder: false,
borderDash: [8, 4],
},
},
},
};
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels,
datasets: [{
data: data,
backgroundColor: barBgColor,
}],
},
options: chartOptions,
});
<canvas id="myChart"></canvas>
I want to display the following image instead of Label in a gauge chart:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33.614mm" height="23.031mm" version="1.1" viewBox="0 0 33.614 23.031" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-34.286 -116.77)">
<path
d="m35.218 128.28 2.6458-10.583 2.6458 10.583 2.6458 10.583 5.2916-21.166 5.2916 21.166 5.2916-21.166 5.2916 21.166 2.6458-10.583v0"
fill="none" stroke="#000" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.865"
/>
</g>
</svg>
Here is the chart:
option = {
series: [
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, 'red'],
[0.7, 'orange'],
[1, '#96BE0F']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -15,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: -15,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: -20,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'auto',
},
data: [
{
value: 50,
name: 'Label',
// image: 'path://m57.046 134.9v-13.229m3.9688 12.7h2.6458v-12.171h-2.6458m-22.49 12.7h18.521v2.6458l3.9687 1e-5 1e-6 -18.521h-3.9688v2.6458h-18.521v0h-1e-6'
}
],
title: {
fontSize: 20,
fontWeight: 800,
fontFamily: 'Arial',
color: 'grey',
offsetCenter: [0, '-70%'],
// image: 'path://m57.046 134.9v-13.229m3.9688 12.7h2.6458v-12.171h-2.6458m-22.49 12.7h18.521v2.6458l3.9687 1e-5 1e-6 -18.521h-3.9688v2.6458h-18.521v0h-1e-6'
},
}
]
};
I want to insert that image with fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.865".
I only could output the image in a pictorial chart, but even then I could not make it not to fill anything.
Update
I was able to output a PNG image using graphic, but not an SVG. Has anyone have a clue why? How can I output an SVG image?
option = {
xAxis: {show: false},
yAxis: {show: false},
series: [
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, 'red'],
[0.7, 'orange'],
[1, '#96BE0F']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -15,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: -15,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: -20,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'auto'
},
data: [50]
},
],
graphic: {
type: 'image',
left: 'center',
bottom: 495,
offsetCenter: [0, '-60%'],
style: {
image: 'https://i.imgur.com/4KIo3sb.png',
// image: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z',
width: 80
}
}
}
How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?
Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...
JavaScript:
var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
colors = dataColors.split(",");
}
var options = {
chart: {
height: 260,
type: 'bar',
stacked: true,
stackType: '10%',
toolbar: {
show: false
},
},
stroke: {
curve: 'smooth',
width: 1
},
grid: {
column: {
colors: ['transparent', '#e5e5e5'],
},
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Cost',
data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
}, {
data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
}],
xaxis: {
labels: {
show: true,
style: {
fontSize: '10px'
},
padding: {
top: 0,
bottom: 20
},
},
offsetY: -10,
position: 'bottom',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
padding: {
top: -5,
bottom: 0
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
title: {
text: '£0,000',
style: {
fontWeight: 400,
fontSize: '9px',
}
},
tickAmount: 5,
forceNiceScale: false,
decimalsInFloat: 0,
max: 10,
},
fill: {
type: "gradient",
/* gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
type: 'vertical',
opacityTo: 0.9,
colorStops: [
{
offset: 40,
color: "#EF9432",
opacity: 1
},
{
offset: 100,
color: "#A865AA",
opacity: 1
}
]
}*/
},
legend: {
show: false,
},
colors: colors,
grid: {
row: {
show: false,
},
borderColor: '',
padding: {
bottom: 5,
top: 1
}
}
}
Need to get this
Currently have
You should use distributed property
plotOptions: {
bar: {
distributed: true
}
}
I'm having trouble on getting the events to work on my chart. I need to get the value of selected area of my parallel coordinates chart. I tried using chartDataRangeSelected but it does nothing when I select some data.
Here's my code:
<div echarts [options]="chartOption" class="demo-chart" (chartInit)="onChartInit($event)" (chartDataRangeSelected)="onChartSelect($event)"></div>
Chart config:
chartOption: EChartOption = {
title: {
text: 'Demo Parallel Coordinates',
subtext: 'data from macrofocus',
left: 'center',
top: 5,
itemGap: 0,
textStyle: {
color: '#000000'
},
z: 200
},
parallelAxis: this.makeParallelAxis(this.schema),
grid: [{
show: true,
left: 0,
right: 0,
top: '0',
bottom: 0,
borderColor: 'transparent',
backgroundColor: 'white',
z: 99
}],
parallel: {
top: '10%',
left: 100,
right: 100,
bottom: 100,
axisExpandable: true,
axisExpandCenter: 15,
axisExpandCount: 10,
axisExpandWidth: 60,
axisExpandTriggerOn: 'mousemove',
z: 100,
parallelAxisDefault: {
type: 'value',
nameLocation: 'start',
nameRotate: 25,
// nameLocation: 'end',
nameTextStyle: {
fontSize: 12
},
nameTruncate: {
maxWidth: 170
},
nameGap: 20,
splitNumber: 3,
tooltip: {
show: true
},
axisLine: {
// show: false,
lineStyle: {
width: 1,
color: '#000000'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
z: 100
}
},
series: [
{
name: 'parallel',
type: 'parallel',
smooth: true,
lineStyle: {
color: '#577ceb',
width: 0.5,
opacity: 0.6
},
z: 100,
data: this.rawData
}
]
};
Function:
onChartSelect(e){
console.log(e);
}
Am I using the correct events for doing so? Your help will be much appreciated.
Thanks
according to eCharts document,
the selectDataRange Event emitted after range is changed in visualMap. https://www.echartsjs.com/en/api.html#events.datarangeselected,
which is chartDataRangeSelected of ngx-echarts mapped to.
And you can see that, it is an event related to visualMap. your charts does not have a visual map at all, so i guess the event will not be fired.
You can try chartAxisAreaSelected, as this is more related to your chart.
Hi all i have this chart
http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png
and i need to get in result
http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png
I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem.
Because i refactored a lots of code all day and had not find solution of task.
My settings
chart: {
type: 'areaspline',
backgroundColor: 'transparent',
height: '500px',
spacingRight: -1,
spacingLeft: -1
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
x: {
min: 0,
max: 0
},
allowDecimalse: false,
gridLineWidth: 1,
gridLineColor: '#393546',
labels: {
y: -20,
},
tickWidth: 0,
lineColor: "#fff",
zIndex: 0,
**crosshair:** {
color: 'rgba(73,168,222,0.5)',
zIndex: 0
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
areaspline: {
marker: {
enabled: false,
states: {
hover: {
symbol: 'circle',
fillColor: '#fff',
lineColor: '#2196f3',
lineWidth: 2,
radius: 7,
enabled: true,
}
},
},
}
},
series: [
{
data: [
],
name: 'V/IRTUS',
showInLegend: false,
color: '#2196f3',
}
],
credits: {
enabled: false
}
};
data [] i get from api and categories too and min max option