Is there any way to generate bar colours dynamically in ZingChart?
in screen-shot there is two colours generated in bar chart, i want to get list of colors used in bar chart.
html file
<zingchart id="timesheet-bar-chart" zc-values="barValues" zc- json="myObj"></zingchart>
controller
$scope.myObj = {
"type": "bar",
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scale-x":{
"transform":{
"type":"date",
"all":"%d %M",
"item": {
"visible":false
}
},
"values":$scope.bar_x_axis,
},
};
and barValues is a list of integer values.
Since your question is asking how to get the bar colors, not set the bar colors. I thought my answer would be appropriate as well.
You can use the API to getobjectinfo from the chart.
demo here
$scope.myRender = {
events : {
complete : function(p) {
var info1 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 0
});
var info2 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 1
});
console.log(info1, info2);
}
}
}
If youre confused on the $scope.myRender variable you can read up more on the angular directive here.
You can set the colors like this,
$scope.myJson = {
'plot': {
'styles': ['#yellow', 'red', 'blue']
},
'scale-x': {
'values': ['white', 'red', 'pink']
},
'type': 'bar',
'series': [{
'text': 'Product History Color',
'values': [2, 6, 8]
}]
}
DEMO
You can specify the colors, fonts etc by yourself.
e.g.
scaleX: {
labels: ['Facebook','Apple', 'Microsoft', 'Intel','Google', 'Amazon'],
item: {
fontFamily: "Roboto",
fontSize: 14
},
lineColor: "#DDD",
tick:{
visible: false
}
},
Related
I have a bar chart that always shows 4 bars. The bars are coloured dynamically. It looks like the coloured box takes its colour from the first data. I would like to use the colour from the 4th (last) data value. Maybe the options:plugins:legend:label:sort function helps but I don't understand what it does.
options
const options = {
scales: {
x: {
grid: {
display: false,
color: 'rgba(0,0,0)'
}
},
y: {
display: false,
min: 0,
max: 4
},
},
plugins: {
legend: {
position: 'bottom'
}
}
}
So I don't know if I can change the data that the box color comes from, or if there is a config option somewhere where I can change it manually.
You can use the generateLabels function as described here.
Please take a look at below runnable sample code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Dataset',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color
}];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
Following up with #uminder's answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color,
+ hidden: !chart.isDatasetVisible(0)
}];
}
}
}
}
}
I have my dataset and I need to display 3 labels but when I add more it only displays one , and I want to be able to have label with different colors too , my other problem is that I want to add "%" to the data but It say "Expression needed " .
Here is my datasets :
datasets: [{
labels: ["Book 1", "Book 2" , "Book 3" ],
data: [8%, 24%, 92%, 30% , 5%],
backgroundColor: ["yellow", "red", "blue", "blue" , "red" ],
barThickness:30
}]
The labels attribute is part of data, but is not an element of the dataset you should write it like this: data={labels, dataset}. Your data length and the number of colors should also match the number of labels. I added 2 more books (book4 and book5) labels so we have the same number of labels, data, and colors.
To add the '%' sign, you can modify the label as you want with the options object. With this object, you can provide a callback function to customize the labels. The namespace is options.plugins.tooltip.callbacks. More in here: Tooltip | Chart.js
The label you mention that it only displays 1 is not precisely a label, but the legend of the chart. Since the name of each book is right below each bar I removed the legend with the options object. The namespace is options.plugins.legend
Following is the Bar object and an image of how it looks
<Bar
width={100}
height={50}
data = {{
labels: ["Book1","Book2","Book3","Book4","Book5"],
datasets: [{
data: [8, 24, 92, 30, 5],
backgroundColor: ["yellow", "red", "blue", "orange", "pink"],
}
]
}}
options={{
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
callbacks: {
label: (context) => {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y + '%';
}
return label;
}
}
}
},
}}
/>
If what you want is to show each bar and have a legend on top of each bar with the name of the book then what you need to do is to treat each bar as a different dataset. For each dataset, add the book name in the label attribute and for the labels array, leave only 1 value so it stays as one section, you can write whatever you want or leave it blank as "". In this case, the legend is necessary, so the only difference in the options object is that the legend attribute is omitted and set to its default: true
<Bar
width={100}
height={50}
data = {{
labels: [""],
datasets: [{
label:'Book1',
data: [8],
backgroundColor: ["yellow"],
},
{
label:'Book2',
data: [24],
backgroundColor: ["red"],
},
{
label:'Book3',
data: [92],
backgroundColor: ["blue"],
},
{
label:'Book4',
data: [30],
backgroundColor: ["orange"],
},
{
label:'Book5',
data: [5],
backgroundColor: ["pink"],
}
]
}}
options={{
plugins: {
tooltip: {
enabled: true,
callbacks: {
label: (context) => {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y + '%';
}
return label;
}
}
}
},
}}
/>
i have double doughnut chart in my react js project code. in that double chart dougnut i want to have 3 different labels in 3 different colour, what should i write to make that?
this my code now
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [{
data: [1000],
backgroundColor: [
"#36A2EB"
],
labels: [
'Blue',
]
}, {
data: [400,600],
backgroundColor: [
"#C4D34C",
"#F7464A"
],
labels: [
'Green',
'Red'
],
}],
};
until now with that code the output labels is "blue","green" and "green" again
i want to make 3 different labels in 3 different colour too, anyone can help me?
result :
Ok, so i have read the docs of react-chartjs-2 and their Doughnut Chart does not support rendering two datasets like you want, i came up with this workaround that will help you to achieve what you want.
import React from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";
const App = () => {
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [
{
data: [1000, 0, 0],
//You should set here all the other colors desired from the other datasets so it can be interpreted by the component
backgroundColor: ["#36A2EB"],
labels: ["Blue"],
},
{
data: [400, 600],
backgroundColor: ["#C4D34C", "#F7464A"],
labels: ["Green", "Red"],
},
],
};
const options = {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
console.log(tooltipItem.datasetIndex);
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
},
},
},
};
return (
<MDBContainer>
<h3 className="mt-5">Doughnut chart</h3>
<Doughnut data={dataDoughnut1} options={options} />
</MDBContainer>
);
};
export default App;
Here is the result
I am using ui-leaflet for our angular project. We also have leaflet.heat to create heat maps.
The issue is whenever the data is updated the event on circle markers stops working.
Other minor issue I am facing is the heat map doesn't update unless I use timeout.
Not sure what am I doing wrong, any help is appreciated.
I have created a sample jsfiddle. http://jsfiddle.net/srs/13s1fy02/2/
heatMapData = [
[60.265625, -121.640625], [60.671875, -96.328125]
]
heatMapData_1 = [
[37.265625, -121.640625], [38.671875, -96.328125]
]
circleData = {
'features': [
{
'geometry': {
'type': 'Point',
'coordinates': [-120.9998241, 39.7471494]
},
'type': 'Feature',
'properties': {
'popupContent': 'This is popup 1'
}
}
]
};
circleData_1 = {
'features': [
{
'geometry': {
'type': 'Point',
'coordinates': [-100.9998241, 39.7471494]
},
'type': 'Feature',
'properties': {
'popupContent': 'This is popup2'
}
}
]
};
onEachFeature = function(feature, layer) {
return layer.bindPopup(feature.properties.popupContent);
};
$scope.updateData = function() {
if($scope.layers.overlays.hasOwnProperty('heat')){
delete $scope.layers.overlays['heat'];
}
$scope.geojson = {};
//setTimeout(function(){ buildMap(heatMapData_1, circleData_1) }, 300);
buildMap(heatMapData_1, circleData_1);
}
buildMap = function(heatMapData, circleData){
$scope.geojson = {
data: circleData,
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, style);
}
};
$scope.layers.overlays = {
heat: {
name: 'Heat Map',
type: 'heat',
data: heatMapData,
layerOptions: {
radius: 10,
scaleRadius: true,
maxZoom: 7,
minOpacity: .5,
max: 1,
gradient: {
.4: 'green',
.6: 'yellow',
1: 'red'
}
},
visible: true
}
};
}
buildMap(heatMapData, circleData)
As for the reason why you cannot click on your Circle Marker when your heat map is on, it is probably just a matter of SVG elements stacking: the heat map is drawn after the Circle Marker and covers the whole map, hence you can no longer mouse interact with the marker.
You can trigger the issue by simply hiding and showing again your heat map overlay (not even need to update).
I'd like to pass some graph parameters via a JSON array to the graph. In it, it should be the title of the graph, the units, ... and clearly, the data.
As soon as I start to try to convert the JSON array from a simple "data" array to one which can hold more information, it doesn't work anymore. I guess it has something to do with the sort of brackets I am using. Being confused about which ones are the right ones.
I put it into a fiddle.
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 50
},
xAxis: {
},
title:
{
text: "Title",
align: "center",
},
plotOptions:
{
series:
{
marker:
{
enabled: false
}
}
},
series: [{}]
};
/* This works
data = [
{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}
];
*/
/* This doesn't */
data = [
{
"series":
[{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}]
}
];
/* load the stuff in the JSON like this= */
options.series = data["series"];
var chart = new Highcharts.Chart(options);
});
Thanks a lot for any hints what I am doing wrong.
The data object is array so you need to refer to first element and then to object.
options.series = data[0].series;
Example: http://jsfiddle.net/jd41gz1q/6/