I'm trying to change the color of the black labels on the x-axis. Now they're black, which don't go well with the background. In the documentation I only found: rowLabelStyle or barLabelStyle. How can I change the color of the labels on the x-axis?
By using this CSS:
#timeline text {
fill: #dddada;
}
The text appears light.
Related
I need to create graphs with daily data and we need the weekend bars to be a different color. I am able to color my bar graph with the weekends being green via the Plot attribute and rules as shown in my code by using the #Dayofweek# function and it works great. However, when I do this the X-axis labels are values of 1 through 7 as shown in in the first image below which won't work. If I just use the date variable then it displays the X-axis labels correctly as shown in the 2nd attached image but will not correctly color the weekends a different color.
<cfscript>
plot={"rules":[
{
"rule":"'%k' == '1'",
"background-color":"green"
},
{
"rule":"'%k' == '7'",
"background-color":"green"
}
]};
</cfscript>
<cfchartseries type="bar" query="mychartdata" itemcolumn="time" valuecolumn="interval">
https://drive.google.com/open?id=1CADAhxn8n1bNjdx_vJpXA-UXIrOU-vXS
https://drive.google.com/open?id=1cgUgtqSNPTHmC-_aaZoPnbO2CpCz_Qlt
When creating a chart in 'react-apexcharts' it is my understanding that colors should be inherited. However, when creating multiple series with a colors array the legend is set but not the line color.
Codepen demonstration here.
https://codesandbox.io/embed/react-charts-demo-325oh
Instead of color names, try hex color codes.
options: {
colors: ["#008000", "#FF0000"]
}
Color names are supported at some places in ApexCharts, but not all.
use the fill property or colors under options.
Link: https://apexcharts.com/docs/options/fill/#colors
code snippet example:
const options = {
colors: ["#E27483", "#F8C300"]
}
By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:
How can I set some kind of padding to chart area that will make it look like this:
I am using Google Charts https://google-developers.appspot.com/chart/.
I finally found the answer:
Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).
Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):
<%= line_chart #daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>
Result:
The area chart used for the title is too big. I see the area used for allow the tooltip when there is a high value, but if is possible to cut the area used for the title, maybe the tooltip will render from top to bottom.
Is it possible to crop the area used for title (and maybe something more), like:
I just want the "chart draw" area, the red part should be cropped.
Tried titlePosition: 'none', but it didn't work.
Thanks.
The part of your chart that you labeled "chart draw" is controlled by the chartArea option:
chartArea: {
top: 25,
height: '80%'
}
Each sub-option (height, width, top, left) can be either a number (pixels) or a string (percent of total chart height or width). Use these options to enlarge the chartArea's height and/or shrink the area devoted to the chart title.
Hi iam working on google chart it is displaying fine but i need the font size and color of the text displayed on X-axis and Y-axis coordines.Can any one tell how to do this one
Use the hAxis.textStyle.color and vAxis.textStyle.color` options to set the color of the axis labels.
Use the textStyleOption to set the color to labels.
hAxis: {
title: "Locations",
textStyle: {
color: 'black'
}
},