Related
I'm learning to work with Apexcharts and need to show the labels (Y axis labels an data labels) as currency (GBP) but can't seem to find the right approach. I have looked at the locale code, but really not sure how to integrate this into my chart.
I'm trying to ensure that 1000 become 1,000 etc.
Below is the chart code
<script>
var options = {
series: [
{
name: "Price in £s",
data: [1000, 2000, 2500, 3000, 4800, 6000]
}
],
chart: {
height: 350,
type: 'bar',
id: 'areachart-2',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ['#f6564d', '#545454'],
dataLabels: {
enabled: false,
textAnchor: 'middle',
formatter: function(val, index) {
return val.toFixed(0);
}
},
stroke: {
curve: 'straight'
},
title: {
text: '',
align: 'left'
},
grid: {
borderColor: '#f1f1f1',
row: {
colors: ['#fff', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
markers: {
size: 100
},
xaxis: {
categories: ['01/05/22','01/06/22','01/07/22','01/08/22','01/09/22','01/10/22'],
title: {
text: 'Month'
}
},
yaxis: {
min:00,
title: {
text: 'Price in GBP',
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: 100,
offsetX: 100
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
In yaxis add labels formatter
labels:{
formatter: (value) => {
return `${numberWithCommas(value)} GBP`;
},
},
And use this regex to add commas
function numberWithCommas(x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
Axes labels formatting can be controlled by yaxis.labels.formatter and xaxis.labels.formatter.
yaxis: {
labels: {
formatter: function (value) {
return value + "$";
}
},
},
xaxis: {
labels: {
formatter: function (value) {
return value;
}
}
}
Examples within. For reference, I am using the latest version of ChartJS (3.2.1) and the latest version of react-chartjs-2 (3.0.3).
I want to know how to make my bar chart display in a specific way given multiple, varying datasets. I'd like for the bars on the chart to render at their standard widths, while also allowing side-by-side overlapping where necessary.
ChartJS will handle this in my "ideal" way when you're using one dataset which may have two values that fall on the same X-Axis coordinate, but I can't seem to mimic this behavior when using multiple datasets.
It seems as though whenever two datasets share an axis, the bar widths either adjust to accommodate both sets of data even if they don't occupy the same space, or they stack on top of one another when should they occupy the same space. My goal is to only have the bars "shrink" their width when necessary, and keep their full-width otherwise.
Here is an example of what I would like to see with multiple datasets (this is how ChartJS handles the rendering when there is one dataset with barThickness: "flex" set):
In the middle, you'll notice the bar widths automatically adjusted to make room for one another.
Here is an example of what I get when I use two datasets that do not have any points where they overlap (barThickness: "flex" is set on both):
And, lastly, here is an example with some points of overlap when using two datasets:
So far the only way I've even sniffed a way around this is by creating multiple x-axes, one for one dataset, one for the other, and one for overlap. Then, by manipulating my data structures, creating datasets for each axis that contain exactly the datapoints that correspond to the desired bar widths.
That's certainly a solution, but I am dealing with a production codebase, thousands of rows of data, and several additional datasets (all of which have varying states, conditions for visibility, and rules). It becomes next-to-impossible to manage all of them together like this, let alone in a maintainable way. I've gone through the vast majority of StackOverflow questions and ChartJS documentation trying to find a cleaner solution, but have come up short thus far and would appreciate your help.
A simplified version of the code below. I've included some unused bits and pieces (mostly commented out) just to show the things I've tried thus far:
var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");
var ctx3 = document.getElementById("canvas3").getContext("2d");
function getBackgroundColor(data) {
const bar = data.dataset.data[data.dataIndex];
return bar.projection ? "green" : "black";
}
const dataset1Labels = ['Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021']
const dataset2Labels = ['Jan 2020', 'Feb 2020', 'Mar 2020', 'Apr 2020', ...dataset1Labels]
const dataset3Labels = ['Jan 2020', 'Feb 2020', 'Mar 2020', 'Apr 2020', 'May 2020', 'Jun 2020', 'Jul 2020', 'Aug 2020', ...dataset1Labels]
const dataset1 = [
{ x: "Mar 2021", y: 1, projection: false },
{ x: "Apr 2021", y: 4, projection: false },
{ x: "May 2021", y: 6, projection: false },
{ x: "May 2021", y: 9, projection: true },
{ x: "Jun 2021", y: 11, projection: true },
{ x: "Jul 2021", y: 13, projection: true },
{ x: "Aug 2021", y: 16, projection: true },
]
const dataset2 = [
{ x: "Jan 2020", y: 1 },
{ x: "Feb 2020", y: 4 },
{ x: "Mar 2020", y: 6 },
{ x: "Apr 2020", y: 8 },
{ x: "Mar 2021", y: 6 },
{ x: "Apr 2021", y: 8 },
]
const dataset3 = [
{ x: "Jan 2020", y: 1 },
{ x: "Feb 2020", y: 4 },
{ x: "Mar 2020", y: 6 },
{ x: "Apr 2020", y: 8 },
{ x: "May 2020", y: 10 },
{ x: "Jun 2020", y: 12 },
{ x: "Jul 2020", y: 12 },
{ x: "Aug 2020", y: 16 },
{ x: "Mar 2021", y: 1 },
{ x: "Apr 2021", y: 4 },
{ x: "May 2021", y: 6 },
]
var myChart = new Chart(ctx1, {
type: 'bar',
data: {
labels: dataset1Labels,
datasets: [{
label: "2 data types, distinguished by color",
data: dataset1,
backgroundColor: getBackgroundColor,
barThickness: "flex",
}]
},
options: {
plugins: {
title: {
display: true,
text: '1 dataset. Can Overlap. Full width bars.'
},
legend: {
position: "bottom",
},
},
scales: {
x: {
id: "dates",
offset: true,
},
}
}
});
var myChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: dataset2Labels,
datasets: [
{
label: "previous year",
data: dataset2,
backgroundColor: "blue",
xAxisID: "dates",
},
{
label: "current year",
data: dataset1,
backgroundColor: "green",
},
]},
options: {
plugins: {
title: {
display: true,
text: '2 datasets. Cannot Overlap. Full width bars.'
},
legend: {
position: "bottom",
},
},
scales: {
x: {
id: "dates2",
display: false,
stacked: false,
bounds: "ticks",
grid: {
offset: true,
},
},
}
}
});
var myChart3 = new Chart(ctx3, {
type: 'bar',
data: {
labels: dataset3Labels,
datasets: [
{
label: "previous year",
data: dataset3,
backgroundColor: "blue",
// group: false,
// barThickness: "flex",
// categoryPercentage: 1,
// barPercentage: 1,
},
{
label: "current year",
data: dataset1,
backgroundColor: "green",
// group: false,
// categoryPercentage: 1,
// barThickness: "flex",
// barPercentage: 1,
},
]},
options: {
plugins: {
title: {
display: true,
text: '2 datasets. Can overlap. Half-width bars.'
},
legend: {
position: "bottom",
},
},
scales: {
x: {
id: "dates3",
display: false,
grid: {
offset: true,
},
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1/dist/chart.min.js"></script>
<h2>Chart #1</h2>
<canvas id="canvas1"></canvas>
<h2>Chart #2</h2>
<p>Note that March and April 2021 both have data from both datasets, but only one dataset is visible</p>
<canvas id="canvas2"></canvas>
<h2>Chart #3</h2>
<canvas id="canvas3"></canvas>
I have a single hierarchy and based on values, I want gradient based on values on my map. I have used echarts for this. The solution given in their examples is hard to implement for getting a gradient. I have used React JS to achieve this. Here's my code along with json here -
import React, {useEffect} from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
import ReactEcharts from "echarts-for-react";
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
var treemapData = [
{
"name": "abcdaaaaaaaaaaaaaaaaa",
"value": 250,
},
{
"name": "xyzxyzxyzxyzxyzzz",
"value": 525,
},
{
"name": "mnopmnopmnop",
"value": 1120,
},
{
"name": "vsuuuuuuuuuvu",
"value": 216,
},
{
"name": "1232342343434",
"value": 400,
},
{
"name": "timetimetime",
"value": 297,
},
{
"name": "placeplaceplace",
"value": 208,
},
{
"name": "countrycountry",
"value": 1203,
}
];
function TreemapEcharts() {
return (
<ReactEcharts
option={{
series: [{
type: 'treemap',
data: treemapData,
label: {
normal: {
textStyle: {
ellipsis: true
},
position: 'insideCenter',
formatter: function (params) {
var arr = [
'{name|' + params.name + '}',
'{value|' + params.value + '}'
];
return arr.join('\n');
},
rich: {
name: {
fontSize: 14,
color: '#fff'
},
value: {
fontSize: 14,
color: '#fff'
},
}
}
},
levels: [
{
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
gapWidth: 2
}
}
},
],
}]
}}
style={{ height: '300px', width: '50%' }}
/>
)
}
export default TreemapEcharts
Please let me know how can we add a gradient where color varies from darkest shade to lightest shade of one color here.
In case anyone is still wondering, you should take a look at their document regarding level: https://echarts.apache.org/en/option.html#series-treemap.levels.
Basically, you need to configure a color range and set colorMappingBy to "value". You should have something like this for your level config:
{
color: ["#942e38", "#aaa", "#269f3c"],
colorMappingBy: "value",
itemStyle: { ... }
}
To fine-tune your visualization, you can convert your value to an array, with the second element in the array being a value scaled to the desired saturation and map your color to that value by setting visualDimension to 1 (index value of the element the array), and manually set visualMin and visualMax values.
You can also take a look at their example: https://echarts.apache.org/examples/zh/editor.html?c=treemap-visual.
Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?
The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
"label": "Total V",
"xAxisID": "v",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100,90,80,70,60]
},
{
"label": "Total C",
"xAxisID": "c",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10,9,8,7,6]
}]};
var options = {scales:{
xAxes:[
{position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
{position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};
var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});
You can have dynamic configuration for bar as well as horizontalBar you can use this configurations
Fiddle demo
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [{
"label": "Total V",
"yAxisID": "A",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "Total C",
"yAxisID": "A",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yAxes: [{
id: 'A',
position: 'left'
}]
}
};
var ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "horizontalBar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand
Update
Replace following as option in the chart above for required axis scales
var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
updated fiddle
Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.
The second dataset will go to the x-axis which is shown at the top.
Working fiddle included:
{
scales: {
yAxes: [{
id: 'A',
position: 'left',
display: true,
gridLines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xAxes: [{
barPercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}, {
stacked: false,
barPercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}],
}
};
fiddle for two axis horizontal bar chart
I wish Google Charts error messages were a little more clear. I'm getting the following error:
Chart not displayed due to error: a[jc] is not a function. Full error object follows.
In the object that follows it doesn't give much additional information.
My columns are specified like this:
chartData.data.cols = [
{
id: "some-date",
label: "Date",
type: "datetime",
},
{
id: "somenumber",
label: "Some Number",
type: "number",
},
];
And my rows are created like this:
var dateObject = new Date("2014-12-06T10:30:00-0800");
var newRow = {
c: [
{
v: dateObject,
},
{
v: arrayItem.predicted_dst,
},
],
}
My options.haxis is:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baseline: 1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
It took me a while to solve this problem so I thought I'd post the situation. It turns out that the baseline:1 was causing the issue.
In my code the baseline 1 was in there as a default for the many other charts I've been creating.
My options now look like this:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
I'm not sure why the Google Chart error message is so cryptic, but if anyone else gets this error