I have problem with my chart, I want to my Pie chart use specific color for specific label, for example :
if label is "Bekerja" then chart color is #2489FF
here is my code :
var options = {
chart: {
type: "donut",
fontFamily: 'inherit',
height: 260,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
fill: {
opacity: 1,
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
showAlways: true,
show: true
}
}
},
distributed: false,
}
},
colors: ["#2489FF", "#FFC149"],
series: jumlah,
labels: nama_status,
}
does anyone can help? thank you.
Related
I am trying to change ApexChart tooltip background colors but i couldn't do it.
They aren't same with the series colors. I tried set fillSeriesColor to true but it didn't worked, i don't know why.
Also I couldn't find the default colors to change them from css file, there is so confusing. Something must be going wrong.
My donut option codes are below, please help.. :)
var options = {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800'],
series: time,
labels: name,
chart: {
width: 350,
height: 280,
type: 'donut',
},
cutoutPercentage: 75,
responsive: !0,
maintainAspectRatio: !1,
cutout: "75%",
title: {
display: !1
},
fill: {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800']
},
animation: {
animateScale: !0,
animateRotate: !0
},
tooltip: {
fillSeriesColor: true,
x: {
fillSeriesColor: true
},
y: {
fillSeriesColor: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
plugins: {
legend: {
display: !1
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
donut: {
size: "85%",
labels: {
show: true,
name: {
color: "#000000",
show: true
},
value: {
color: "#000000",
show: true
},
total: {
fontSize: "12px",
color: "#000000",
show: true,
label: 'testing'
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
};
I'm using apexcharts with vue (vue-apexcharts 1.6.1) and making horizontal barchart for UHD resolution. The apexcharts inner is overflowing the chart width which is 100%.
Here is the template code:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
And here is the chart options:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
Here's the output of above code:
Output of above code
Output of above code with dev tools
Expected behavior:
Expected behavior design
How can I adjust the chart so that my site matches the design? Right now the font-size of label is 40px in UHD resolution.
Thanks
P.S. I'm not using flex in any ancestor elements.
I solved this issue by giving maxWidth to y-axis label and by manipulating my x-axis categories to be in multiline.
After fix image
yaxis: {
opposite: true,
labels: {
maxWidth: "auto",
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
}
I have a chart where I had to build a second series to format the labels for my design brief. In this the data labels on the pie chart show percentages, and the legend shows the labels of the items. Currently my implementation works fine except that the legend is still hoverable, and causes the chart to wash out.
Highcharts.chart({
chart: {
styledMode: true,
renderTo: chart,
events: {},
},
title: {
text: "",
},
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
enableMouseTracking: false,
},
pie: {
dataLabels: {
distance: 3,
padding: 0,
// crop: false,
// overflow: "allow",
alignTo: "toPlotEdges",
verticalAlign: "middle",
},
},
},
series: [
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: highchartsData,
innerSize: "25%",
showInLegend: false,
size: "95%",
states: {
hover: {
enabled: false,
},
},
},
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: labelData,
showInLegend: true,
states: {
hover: {
enabled: false,
},
},
},
],
});
Currently, this is the behavior:
Not sure what to do to disable this that I haven't already done.
You don't need to use the second series, use instead format for data labels.
series: [{
dataLabels: {
format: '{point.y}%'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/jhmfcty3/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.format
I'm trying to represent in a real timeline chart the input from a user's microphone in hertz (corresponding to each musical note from the second octave to the 6th). I'm trying to achieve something like: this
Right now I got: this. If I use the formatter function I get: this.
My problem is that I need to replace the hertz value for the octave scale (A2, B2, C2, D2, E2, F2, G2 and so on) on the Y-axis.
My config:
const initialOptions = {
chart: {
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 20,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: true,
type: "x",
autoScaleYaxis: true,
zoomedArea: {
fill: {
color: "#90CAF9",
opacity: 0.4,
},
stroke: {
color: "#0D47A1",
opacity: 0.4,
width: 1,
},
},
},
},
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
width: 0.99,
opacity: 1,
},
markers: {
size: 0,
},
plotOptions: {
bar: {
horizontal: false,
},
},
legend: {
show: false,
},
dataLabels: {
offsetX: 0,
enabled: true,
},
xaxis: {
show: true,
categories: [0],
tickAmount: 10, // optional tickAmount value
},
};
And I have tried updating the options on a useEffect like this:
yaxis: {
tickAmount: 1,
labels: {
enabled: true,
formatter: function (val, index) {
return currentNote; // This prints the same output on each line of the Y axis as in picture 2
},
},
},
I've been stuck on this for days now and I'm not sure if I should move on to another library. Any suggestions welcomed!
I've some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();
You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],
You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.
colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}