I use this kind of chart - https://echarts.apache.org/examples/en/editor.html?c=dataset-link
If I add to the first item for series color red (line:22), so the code looks like:
{
type: 'line',
color: 'red',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
It changes the color only in the chart but not in the pie, thank you for solution
Change the global color palette instead of changing colors for each series.
Here is an example based on the one you gave.
option = {
...
//Set the global color palette
color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae',
'#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'],
series : [
...
]
}
Related
So what Im trying to do is to change the color of the values inside the bars of a Bar chart. I have tried all options and also have a pen where it doesnt seem to work: https://codepen.io/vbbalaji/pen/oNbwbpm
[![Bar Chart][1]][1]
[1]: https://i.stack.imgur.com/a8lE7.png ]
There are two problems here:
You need to include the chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0.
Your datalabels options should be nested within the key plugins.
Here's the corrected config:
{
type: "horizontalBar",
data: {
labels: ["Red", "Amber", "Green"],
datasets: [
{
backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
data: [2, -4, 6]
}
]
},
options: {
legend: { display: false },
title: { display: true, text: "Health Variance" },
plugins: {
datalabels: {
color: "blue",
labels: {
title: { color: "blue", font: { weight: "bold" } },
value: { color: "green" }
}
}
}
}
}
It looks like this:
Here's your updated codepen: https://codepen.io/typpo/pen/oNbwxvK
I am making a line graph in Flot, but i can't manage to put x-axes and y-axes to display data normally, they are stick together. How can i make it to be over whole graph. I didn't find in any documentation how to fix that.
This need to be on left side outside of graph : [0.24, "0.24 USD"], [2085.95, "2085.95 USD"]
and this on bottom of a graph
[0, "0"], [1, "Jan"], [275, "Aug"], [549, "Mar"], [823, "Oct"], [1097, "Jun"], [1371, "Dec"], [1372, "Dec"]
Here is an image how it looks now, all is grouped on bottom left corner
And this is how it need to looks like, this is image from Flot website
Here is a code:
var data1 = [{chart_data_money}];
var dataset = [{
data: data1,
color: '#ffa500',
label: 'Loss in USD',
points: { symbol: "circle", fillColor: "#FF000;", show: true}
}];
var options = {
series: {
lines: { show: true },
points: {
radius: 1,
fill: true,
show: true
}
},
xaxes: [{
position: "bottom",
ticks: '{chart_xticks_money}',
color: "black",
axisLabel: "Sin(x)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
yaxes: [{
position: "left",
color: "red", // lines colors for y axes
ticks: '{chart_yticks_money}',
axisLabel: "Sin(y)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
// legend postion and color
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "orange",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, // 2 colors gradient for bg of chart
axisMargin: 20
}
};
$(document).ready(function () {
$.plot($("#graph-line"), dataset, options);
});
The problem is that you give Flot your axis ticks as string instead of array:
ticks: '{chart_xticks_money}',
needs to be
ticks: {chart_xticks_money},
and the same for the other axis.
This fiddle has the same error as your image, and this is the correct version without the '.
The chart is pretty good when it is normal. but i expect it to adjust the bar width upon zoom. The graph without zoom is as below.
when I zoom into the graph, the bars width remains same, very thin!
Is there anyway that they auto adjust? I saw a link where the example adjusts the bar width with the zoom. But I don't see anything missing. Here's the example : http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
Here's my charting code. Am I missing some setting?
var chart = c3.generate({
bindto: '#chart',
data: {
xFormat: '%m/%d/%y %I:%M %p',
json: final_data,
keys: {
x: 'date',
value: values
},
type: 'bar',
groups: val
},
bar: {
width: { ratio: 0.9 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d'
}
}
},
zoom: {
enabled: true
},
color: {
pattern: colors
}
});
Try removing key value pair "bar".
If the problem still persists, try setting axis.x.tick.fit = false
I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...
I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).
$.plot($("#placeholder"), [
{
label: 'Failed',
data: [[0,10]],
bars: { show: true }
},
{
label: 'Passed',
data: [[1,15]],
bars: { show: true }
},
{
label: 'Not Run',
data: [[2,30]],
bars: { show: true }
},
{
label: 'Blocked',
data: [[3,5]],
bars: { show: true }
},
{
label: 'In Progress',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.
Is this possible OOTB?
It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.
.tickLabel { font-size: 80% }
Here's an example directly from the API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}
http://flot.googlecode.com/svn/trunk/API.txt
The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(replace some_number with the desired size in points)
I used the following:
CSS File/SCSS File
#graph_label .tickLabel{
font-size: 50%;
}
Index.html or place where you are plotting the graph area
$.plot($("graph_label"), [dataArrayReference], options);
Ref: #BrentM 's Answer Above
PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work