Right now I'm using a custom palette to display warning level counts in a pie chart. However, occasionally an alarm comes in with an unexpected severity which messes up the colors. I would like to set up some CSS classes like warningPie, criticalPie or minorPie with orange, red and yellow respectively. Then, I'd like to use the series label text to apply the class.
I don't see anything in the dxchart documentation that would make this possible. Does anyoe have any ideas?
Here is my full chart code if anyone is curious.
dxPieChart: {
dataSource: fieldValueCount(['severity']),
palette: ['#CC3300', '#FF9900', '#FFFF00', '#33CC33', '#0066FF'],
animation: true,
legend: {
backgroundColor: '#FCFCFC',
border: {
color: 'black',
width: .5,
visible: true,
cornerRadius: 10
},
visible: false
},
series: [{
type: 'doughnut',
argumentField: 'severity',
valueField: 'count',
label: {
visible: false,
font: {
size: 12,
color: 'black'
},
radialOffset: -15,
backgroundColor: 'rgba(0,0,0,0)',
connector: {
visible: false,
width: 0.5
},
position: 'inside',
customizeText: function(arg) {
globalTest = arg;
return arg.value + ' (' + arg.percentText + ')';
}
},
border: {
color: 'black',
width: .5,
visible: true
},
hoverStyle: {
border: {
color: 'black',
width: .5,
visible: true
}
}
}],
tooltip: {
enabled: true,
color: 'cornflowerblue',
font: {
size: 14
},
customizeText: function(arg) {
globalTest = arg;
var content = arg.argumentText + '<br>' + arg.value + ' (' + Math.round(arg.percent * 100) + '%)';
return content
}
},
title: {
text: ' ',
font: { size: 14 },
horizontalAlignment: 'center'
}
}
You can use customizePoint and customizeLabel options in the pie chart.
Related
I'm trying to give a background colour to my ApexCharts polarArea chart (I want the areas marked by red dots in the image to be grey/white):
I can't find a way to do this. I've tried adding fill to the various options, but nothing. I thought it might be possible with polygons like the radar chart, but no.
The closest I have come is by adding a CSS class to the chart on the containing Vue component:
<Chart class="chart" :myValues='this.myValues' :key="componentKey" />
.chart {
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
margin: auto;
padding-top: 3px;
padding-right: 4px;
}
But annoyingly it's not centred on the chart origin and even with pixel precise increments to padding it's not quite right! Also, if possible I'd like alternating colours for each of the rings, like is possible with the radar chart.
My full chart Vue component:
<template>
<div class="polarChart">
<apexcharts height="360" type="polarArea" :options="chartOptions" :series="series"></apexcharts>
</div>
</template>
<style scoped>
.polarChart {
align-items: center;
}
</style>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Chart',
components: {
apexcharts: VueApexCharts,
},
props: ['myValues'],
data: function() {
return {
series: this.myValues,
plotOptions: {
polarArea: {
dataLabels: {
offset: 30
},
}
},
chartOptions: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
colors:['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
legend: {
show: false
},
yaxis: {
max: 100,
show: false
},
xaxis: {
categories: ['A.', 'B.', 'C.', 'D.', 'E.', 'F.']
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return Math.round(opts.w.globals.series[opts.seriesIndex]) + "% " + opts.w.globals.labels[opts.seriesIndex]
},
background: {
enabled: true,
borderRadius:2,
},
style: {
colors: ['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
}
},
tooltip: {
// enabled: false
},
chart: {
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: '100%'
},
legend: {
position: 'bottom'
}
}
}]
},
}
},
methods: {
addData(){
this.updateChart();
},
updateChart() {
this.series = [{
data: this.freshnessValues
}]
}
},
}
</script>
I'm trying to create a chart with 2 horizontal lines using kendo, in order to draw those 2 lines, I'm using plotBands in the valueAxes.
I wish to draw the lines at the values warningMax and warningMin, the problem is that the values of them could be 3k or 350k, is there a way to adjust the thickness of the lines and place a min value in the axis to make sure that when values of series are too small, at least the red line would show at the top?
$("#DivId").kendoChart({
theme: 'bootstrap',
title: {
text: "Title Name",
font: "bold 24px Arial,Helvetica,sans-serif",
color: "black"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",
style: "smooth",
labels: {
visible: false,
format: "{0:c}"
},
},
series: data.series,
valueAxes: [{
name: "axesName1",
plotBands: [
{
from: warningMax,
to: warningMax + 50,
color: "green"
},
{
from: WarningMin,
to: WarningMin + 50,
color: "red"
}
],
title: { text: "Axes Name1" },
labels: {
format: "n0"
},
color: "#428bca" // Dark Blue
}, {
name: "axesName2",
title: { text: "Axes Name2" },
labels: {
format: "p2"
},
color: "#5cb85c" // Green
}],
categoryAxis: {
categories: data.categories,
axisCrossingValues: [0, 31],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
}
});
How to apply striped combination of pattern color in pie chart in ExtJs.
Try this :
new Ext.Panel({
width: 400,
height: 400,
title: 'Pie Chart with Legend - Favorite Season',
renderTo: 'container',
items: {
store: store,
xtype: 'piechart',
dataField: 'total',
categoryField: 'season',
series: [{
style: {
colors: ["#ff2400", "#94660e", "#00b8bf", "#edff9f"]
}
}],
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
}
});
Reference : http://jlorenzen.blogspot.in/2010/10/how-to-change-extjs-piechart-colors.html.
You can add more details, what do you want? Is it your requirement?
I'm using Google Charts.
I'm trying to display 15 stores and the number of clicks on each one.
Now that's is working perfectly.
My issue here is in the hAxis. As you can see the stores' names are incomplete, which is fine, but when i hover on an incomplete name, the tooltip is showing me an empty yellow box as shown in the picture below.
If i select the context of this tooltip, then i can read the full name:
My question is:
Is it possible to change the text color in this tooltip in order to read it?
Thanks.
to modify the axis tooltip, you can modify the following css classes...
.goog-tooltip {
background-color: cyan;
color: magenta;
font-weight: bold;
}
.goog-tooltip > div {
background-color: lime !important;
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRow(['January 2016', 500, 100, 1200, 1000]);
data.addRow(['February 2016', 500, 100, 1975, 1000]);
data.addRow(['March 2016', 500, 100, 1200, 1000]);
data.addRow(['April 2016', 500, 100, 1200, 1000]);
// find v-axis max value
var vAxisMax = null;
for (var i = 1; i < data.getNumberOfColumns(); i++) {
var range = data.getColumnRange(i);
vAxisMax = vAxisMax || Math.ceil(range.max / 1000) * 1000;
vAxisMax = Math.max(vAxisMax, Math.ceil(range.max / 1000) * 1000);
}
// add buffer for annotation
vAxisMax += 400;
var options = {
backgroundColor: '#000000',
chartArea: {
top: 12,
bottom: 24,
left: 72
},
legend: {
position: 'none'
},
colors: ['#9427E0'],
hAxis: {
slantedText: true,
textStyle: {
color: '#ffffff'
}
},
vAxis: {
title: 'Amount',
viewWindow: {
max: vAxisMax
}
},
bar: {
groupWidth: '90%'
},
annotations: {
style: 'point',
alwaysOutside: true
},
width: 1100,
height: 300
};
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
.goog-tooltip {
background-color: cyan;
color: magenta;
font-weight: bold;
}
.goog-tooltip > div {
background-color: lime !important;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Try slantedTextAngle
hAxis: {direction:1, slantedText:true, slantedTextAngle:90 },
i'm using highcharts for genetating graphs, problem is, highcharts is generating space between border and content of Tooltip and labels of the Pie diagram is visible between that generated space.
can any has solving for my problem.
Please check with below example.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
margin: 40,
text: 'Podíl všech potřeb'
},
tooltip: {
borderWidth: 1,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function () {
return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
zIndex: 1,
enabled: true,
color: '#000000',
connectorWidth: 2,
useHTML: true,
formatter: function () {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
}
}
}
},
series: [{
type: 'pie',
name: 'Potřeba',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
.label {
z-index: 1!important;
}
.highcharts-tooltip span {
background-color:white;
border:1px solid green;
opacity:1;
z-index:9999!important;
}
.tooltip {
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>
tooltip space between order and content highcharts
SVG tooltip elements can be hidden through:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
Example: http://jsfiddle.net/x8Lq0yr9/1/
This will eliminate the space between border and HTML content.
you are using div class="tooltop" where as tooltop class is nowhere. Also, .highcharts-tooltip is used in highcharts at two places . one at datalables and second in tiiptip.
Unless you want specific border color , you can remove that css class from your code and tooltip loks good.
.tooltipSpan {
opacity:1;
z-index:9999!important;
width:100%;
}
See this Fiddle
Highcharts creates these using svg which makes it so the background shows up underneath certain elements. To avoid this undesired behavior the border and background settings have been turned off and all these are controlled, instead, using html in the formatter function. Using HTML makes it so the background does not show up underneath certain elements.
tooltip: {
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 0,
}