Develop Reference

apexCharts bars color per values

i have this bars chart with data values
i want to set colors descending from red to green
i tried range but this is dynamic data doesnt have constant values
chart options code
const options = {
chart: {
id: "basic-bar",
toolbar: {
show: false,
},
},
xaxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
labels: {
style: {
colors: font_color,
fontSize: "12px",
fontFamily: "DM sans, sans-serif",
fontWeight: 500,
},
},
},
fill: {
opacity: 0.95,
},
grid: {
show: false,
},
yaxis: {
show: false,
labels: {
formatter: function (value) {
return value.toFixed(0) + "k€";
},
style: {
colors: font_color,
fontSize: "12px",
fontFamily: "DM sans, sans-serif",
fontWeight: 500,
},
},
},
plotOptions: {
bar: {
distributed: false,
dataLabels: {
position: "bottom",
},
},
},
colors: ["#F6CC0D"],
dataLabels: {
enabled: true,
style: {
colors: ["#000000"],
fontFamily: "DM sans, sans-serif",
fontWeight: 700,
fontSize: "16px",
},
formatter: function (value) {
return value.toFixed(2) + "K€";
},
},
},
in apexcharts docs there is only colors range option
https://apexcharts.com/docs/colors/

Apex Charts donut chart - padding between series items in plot

I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.
current configuration
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};

Try setting the stroke width to greater than 0 and give the stroke same color as the background.
stroke: {
width: 4,
colors: ['#1E252A']
}

eCharts stacked bar graph - Y axis

Playing around with eCharts and i'm trying to replicate the graph shown in this tutorial
https://medium.com/#mailjontay/make-a-dynamic-chart-with-react-and-echarts-a-simple-tutorial-92a5c3c053a2
I'm using my own data sets, and both of my .js files are identical format to the ones used in the tutorial.
I'm having an issue with rendering the number of workers on my Yaxis, I'm not receiving any error messages and my data is defined.
My code is as follows:
import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import { workForceDataFemale } from "./WorkForceDataFemale";
import { workForceDataMale } from "./WorkForceDataMale";
class App extends Component {
getOption = () => {
let sectors = [];
let years = [];
let workforceObject = [];
let workers = [];
Object.entries(workForceDataFemale).forEach(entry => {
years = [...years, entry[0]];
workforceObject = [...workforceObject, entry[1]];
entry[1].forEach(e => {
workers = [...new Set([...workers, e.n_workers])]
console.log(e.n_workers, "number of workers")
sectors = [...new Set([...sectors, e.sector])];
});
});
let options = years.map(year => {
let obj = {};
obj["series"] = [
{
stack: "group",
data: workForceDataFemale[year]
},
{
stack: "group",
data: workForceDataMale[year]
}
];
obj["title"] = {
text: `Number of workers over time by gender`
};
return obj;
});
return {
baseOption: {
timeline: {
autoPlay: false,
axisType: "category",
bottom: 20,
data: years,
height: null,
inverse: true,
left: null,
orient: "vertical",
playInterval: 1000,
right: 0,
top: 20,
width: 55,
label: {
normal: {
textStyle: {
color: "#aaa"
}
},
emphasis: {
textStyle: {
color: "#333"
}
}
},
symbol: "none",
lineStyle: {
color: "#aaa"
},
checkpointStyle: {
color: "#354EF6",
borderColor: "transparent",
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: "#354EF6",
borderColor: "#354EF6"
},
emphasis: {
color: "#5d71f7",
borderColor: "#5d71f7"
}
}
},
color: ["#e91e63", "#354EF6"],
title: {
subtext: "Data from Sweet Analytics",
textAlign: "left",
left: "5%"
},
tooltip: { backgroundColor: "#555", borderWidth: 0, padding: 10 },
legend: {
data: ["Female", "Male"],
itemGap: 35,
itemHeight: 18,
right: "11%",
top: 20
},
calculable: true,
grid: {
top: 100,
bottom: 150,
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
formatter: function(params) {
return params.value.replace("\n", "");
}
}
}
}
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 55,
textStyle: {
baseline: "top",
color: "#333",
fontSize: 10,
fontWeight: "bold"
}
},
axisLine: { lineStyle: { color: "#aaa" }, show: true },
axisTick: { show: false },
data: sectors,
splitLine: { show: false },
type: "category"
}
],
yAxis: [
{
axisLabel: {
textStyle: { fontSize: 10 }
},
axisLine: { show: false },
axisTick: { show: false },
name: "Population",
splitLine: {
lineStyle: {
type: "dotted"
}
},
type: "value"
}
],
series: [{ name: "Female", type: "bar", data: workers }, { name: "Male", type: "bar", data: workers }]
},
options: options
};
};
render() {
return (
<ReactEcharts
option={this.getOption()}
style={{ height: "85vh", left: 50, top: 50, width: "90vw" }}
opts={{ renderer: "svg" }}
/>
);
}
}
export default App;
This is how far i've gotten :
And I'm trying to get to here:

In the series you should add stack you have in each object to add stack: "stackbar" like this :
series: [
{ name: "Female", type: "bar", data: workers, stack: "stackbar" },
{ name: "Male", type: "bar", data: workers , stack: "stackbar"}
]

How to place shape name by arbitrary x and y coordinates in Zingchart map

guys!
I am using Zingchart map on my website. I have a problem with placing a region name. How can I place a region name by arbitrary x and y coordinates?
zingchart.loadModules('maps, maps-uzb', function(e) {
zingchart.render({
id: 'uzbchart',
data: {
gui : {
contextMenu : {
empty : true
}
},
backgroundColor:'none',
shapes: [{
type: 'zingchart.maps',
options: {
name: 'uzb',
zooming: false,
panning: false,
scrolling: false,
style: {
items:
mapCon, // shape data
tooltip: {
text: '%long-text',
alpha: 0.5,
backgroundColor: 'white',
borderColor: 'white',
borderRadius: 3,
fontColor: 'black',
fontFamily: 'Georgia',
fontSize: 12,
textAlpha: 1,
cursor: "pointer"
},
controls: {
visible: false
}
}
}
}],
},
height: 600,
width: "100%"
});
});

I've solved it myself. I added x and y config parametres into label:
zingchart.loadModules('maps, maps-uzb', function(e) {
zingchart.render({
id: 'uzbchart',
data: {
shapes: [{
type: 'zingchart.maps',
options: {
//...
style: {
items:
{
TK: {
//....
lablel: {
//..........
// added following two line codes
x: 650,
y: 280
}
//...
}
},
//...
}
}
}],
},
height: 600,
width: "100%"
});
});

Highcharts treemap with colouraxis updating styles

I've tried various ways of updating treemap color axis legend font size and font family
var options = {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
style: {
fontSize: '10px',
fontFamily: 'Arial'
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
name: 'G',value: 1,colorValue: 7}] }],
title: {
text: 'Highcharts Treemap'
}
};
var chart = Highcharts.chart('container', options);
$('#update').click(function () {
chart.update({
chart:{
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
legend: {
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
colorAxis: {
labels: {
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
}}
});
chart.legend.update({
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
})
});
Please see here - http://jsfiddle.net/hsuh/t04qe2xx/8/
Style doesn't seem to be updated. Please help. Thanks

Your click event is not fired because of the difference in id.
Remove hash from button's id: <button id='update'> Update </button>
Then you can update axis via axis.update()
$('#update').click(function() {
chart.colorAxis[0].update({
labels: {
style: {
fontSize: '20px'
}
}
})
});
example: http://jsfiddle.net/t04qe2xx/9/