Related
I need to use Noto Sans Arabic font in my React material UI theme.
The theme is working well, overrides are working too.
I have tried React Material UI docs to import my fonts like in react-material documentation, but it doesn't work:
import notoArabic from '../static/fonts/NotoSansArabic-Regular.ttf'
....
const arabic = {
fontFamily: 'Noto Sans Arabic',
fontStyle: 'regular',
fontDisplay: 'swap',
fontWeight: 400,
src: `
local('Noto Sans Arabic'),
local('Noto Sans Arabic-Regular'),
url(${notoArabic}) format('ttf')
`,
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};
...
overrides: {
MuiCssBaseline: {
'#global': {
'#font-face': [arabic],
},
},
...
I expect that the font will be imported and work.
I have any errors, and can see font-family: Noto Sans Arabic; in my browser. But it doesn't work
I'm Persian and our language fonts very very look like Arabic fonts. for my project, I create a separated file, and I named it globalStyles.js:
import { createStyles } from '#material-ui/core';
import yekanRegularTtf from '../app/assets/font/iranyekanwebregular.ttf';
import yekanRegularWoff from '../app/assets/font/iranyekanwebregular.woff';
import yekanRegularWoff2 from '../app/assets/font/iranyekanwebregular.woff2';
import yekanBoldTtf from '../app/assets/font/iranyekanwebbold.ttf';
import yekanBoldWoff from '../app/assets/font/iranyekanwebbold.woff';
import yekanBoldWoff2 from '../app/assets/font/iranyekanwebbold.woff2';
const globalStyles = ({ spacing, typography, colors }) =>
createStyles({
'#global': {
'#font-face': [
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 400,
src: `url(${yekanRegularWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanRegularWoff})`,
`url(${yekanRegularTtf}) format('truetype')`,
],
},
},
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 700,
src: `url(${yekanBoldWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanBoldWoff})`,
`url(${yekanBoldTtf}) format('truetype')`,
],
},
},
],
html: {
lineHeight: '1.5',
WebkitTextSizeAdjust: '100%',
},
'*': {
transition: 'opacity 1s cubic-bezier(0.4, 0, 0.2, 1)',
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
'&:after, &:before': {
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
},
'&[type="checkbox"], &[type="radio"]': {
boxSizing: 'border-box',
padding: '0',
},
'&[type="number"]': {
'&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
height: 'auto',
},
},
'&[type="search"]': {
WebkitAppearance: 'textfield',
outlineOffset: -2,
'&::-webkit-search-decoration': {
WebkitAppearance: 'none',
},
},
'&[hidden]': {
display: 'none',
},
'&::-webkit-file-upload-button': {
WebkitAppearance: 'button',
font: 'inherit',
},
},
body: {
fontFamily: "'IRANYekan', sans-serif, Arial",
lineHeight: '1.38',
margin: 0,
},
'#react-view': {},
'h1, h2, h3, h4, h5, h6': {
margin: [[0, 0, spacing.margin]],
lineHeight: '1.3',
letterSpacing: 0,
textTransform: 'none',
color: colors.black,
display: 'block',
fontFamily: "'IRANYekan', sans-serif, Arial",
},
h1: {
fontSize: typography.fontSize * 1.4,
},
h2: {
fontSize: typography.fontSize * 1.2,
},
h3: {
fontSize: typography.fontSize,
},
h4: {
fontSize: typography.fontSize,
},
h5: {
fontSize: typography.fontSize,
},
h6: {
fontSize: typography.fontSize,
},
p: {
display: 'block',
margin: [[0, 0, spacing.margin]],
},
main: {
display: 'block',
},
hr: {
boxSizing: 'content-box',
height: 0,
overflow: 'visible',
},
pre: {
fontSize: '1em',
},
a: {
backgroundColor: 'transparent',
textDecoration: 'none',
},
'b, strong': {
fontWeight: 'bold',
},
small: {
fontSize: '80%',
},
img: {
borderStyle: 'none',
},
button: {
WebkitAppearance: 'button',
},
input: {
overflow: 'visible',
},
'button, input, optgroup, select, textarea': {
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: '1.15',
margin: 0,
},
'button, input': {
overflow: 'visible',
},
'button, select': {
textTransform: 'none',
},
textarea: {
overflow: 'auto',
},
'button, [type="button"], [type="reset"], [type="submit"]': {
WebkitAppearance: 'button',
'&::-moz-focus-inner': {
borderStyle: 'none',
padding: '0',
},
'&:-moz-focusring': {
outline: [[1, 'dotted', 'ButtonText']],
},
},
fieldset: {
padding: '0.35em 0.75em 0.625em',
},
legend: {
boxSizing: 'border-box',
color: 'inherit',
display: 'table',
maxWidth: '100%',
padding: '0',
whiteSpace: 'normal',
},
progress: {
verticalAlign: 'baseline',
},
details: {
display: 'block',
},
summary: {
display: 'list-item',
},
template: {
display: 'none',
},
},
});
export default globalStyles;
And in the top level of my components, I injected to the project root component:
import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { CssBaseline, withStyles } from '#material-ui/core';
import { Helmet } from 'react-helmet';
import SnackBarProvider from './SnackBar';
import globalStyles from '../utils/globalStyles';
import { generalHelmet } from '../utils/helmetConfig';
type AppProviderProps = {
children: any,
store: any,
};
const AppProvider = ({ children, store }: AppProviderProps) => (
<>
<Helmet {...generalHelmet} />
<CssBaseline />
<ReduxProvider store={store}>
<SnackBarProvider>{children}</SnackBarProvider>
</ReduxProvider>
</>
);
export default withStyles(globalStyles)(AppProvider);
Also, in the Webpack configuration file I wrote the font loader just like below:
~~~
const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv === 'development';
const exclude = [/node_modules/, /public/];
const name = isDev ? '[name].[ext]' : '[hash:5].[ext]';
const publicPath = '/assets/';
~~~
module.exports = {
~~~
module: {
rules: [
~~~
{
test: /\.(woff2?|ttf|eot|svg)$/,
exclude,
loader: 'url',
options: { limit: 10240, name, publicPath },
},
And everything works well now. I hope my configuration helps you.
You can try few things as mentioned below to check if you are compiling code properly.
From the related URL which you mentioned to import the font infers that the static folder and above file directory are siblings. Make sure, the related path are same as per root folder.
Also, if you're using webpack to bundle your code, make sure you include ttf file extension and add file-loader module to handle it during compiling.
e.g.
{
test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
},
There are a few possibilities but I would suggest trying loading the same font via your index.css file and check the result, Could it be the location you are referring is not correct or the font isn't present.
Also a file-loader or plugin might be required to render fonts with webpack read: https://chriscourses.com/blog/loading-fonts-webpack
i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true
I'm trying to scrape a website to keep track of my ranking in a Rocket League playlist over time automatically. The idea being that I'd grab the number corresponding to my playlist and put it in a csv for tacking purposes. I've been able to get the Html for the webpage but can't seem to parse it effectively for the number I'm after.
Here's how I've gathered the webpage info:
$tracker = Invoke-WebRequest -Uri
https://rocketleague.tracker.network/profile/steam/adammast12
$tracker.RawContent
Here's the section of the RawContent that is of interest to me:
<script type="text/javascript">
$('#playlist-tracking-rating').highcharts({
chart: {
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Rating Progression'
},
xAxis: {
categories: ['Nov 05','Nov 08','Nov 10','Nov 11','Nov 12','Nov 13'],
type: 'date',
},
yAxis: {
title: {
text: 'Rating'
}
},
tooltip: {
enabled: true,
shared: true
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [
{ name: 'Un-Ranked', data: [1270,1270,1270,1270,1270,1251] },
{ name: 'Ranked Duel 1v1', data: [655,655,655,655,655,655] },
{ name: 'Ranked Doubles 2v2', data: [815,775,856,847,865,865] },
{ name: 'Ranked Solo Standard 3v3', data: [788,788,788,788,788,788] },
{ name: 'Ranked Standard 3v3', data: [994,994,994,994,994,994] },
{ name: 'Hoops', data: [556,556,556,556,525,525] },
{ name: 'Rumble', data: [651,741,703,703,704,704] },
{ name: 'Dropshot', data: [635,635,635,635,635,635] },
{ name: 'Snowday', data: [770,770] },
]
});
$('#playlist-tracking').highcharts({
chart: {
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Tier Over Time'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Nov 05','Nov 08','Nov 10','Nov 11','Nov 12','Nov 13'],
type: 'date',
labels: {
overflow: 'justify'
}
},
tooltip: {
enabled: true,
shared: true
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{
from: 0,
to: 0.99,
color: 'rgba(75, 75, 75, 0.1)',
label: {
text: 'Unranked',
style: {
color: '#606060'
}
}
}, {
from: 1,
to: 1.99,
color: 'rgba(227, 150, 68, 0.1',
label: {
text: 'Bronze I',
style: {
color: '#606060'
}
}
}, {
from: 2,
to: 2.99,
color: 'rgba(227, 150, 68, 0.1)',
label: {
text: 'Bronze II',
style: {
color: '#606060'
}
}
}, {
from: 3,
to: 3.99,
color: 'rgba(227, 150, 68, 0.1)',
label: {
text: 'Bronze III',
style: {
color: '#606060'
}
}
}, {
from: 4,
to: 4.99,
color: 'rgba(197, 197, 197, 0.1)',
label: {
text: 'Silver I',
style: {
color: '#606060'
}
}
}, {
from: 5,
to: 5.99,
color: 'rgba(197, 197, 197, 0.1)',
label: {
text: 'Silver II',
style: {
color: '#606060'
}
}
}, {
from: 6,
to: 6.99,
color: 'rgba(197, 197, 197, 0.1)',
label: {
text: 'Silver III',
style: {
color: '#606060'
}
}
}, {
from: 7,
to: 7.99,
color: 'rgba(206, 163, 32, 0.1)',
label: {
text: 'Gold I',
style: {
color: '#606060'
}
}
}, {
from: 8,
to: 8.99,
color: 'rgba(206, 163, 32, 0.1)',
label: {
text: 'Gold II',
style: {
color: '#606060'
}
}
}, {
from: 9,
to: 9.99,
color: 'rgba(206, 163, 32, 0.1)',
label: {
text: 'Gold III',
style: {
color: '#606060'
}
}
}, {
from: 10,
to: 10.99,
color: 'rgba(37, 161, 213, 0.1)',
label: {
text: 'Platinum I',
style: {
color: '#606060'
}
}
}, {
from: 11,
to: 11.99,
color: 'rgba(37, 161, 213, 0.1)',
label: {
text: 'Platinum II',
style: {
color: '#606060'
}
}
}, {
from: 12,
to: 12.99,
color: 'rgba(37, 161, 213, 0.1)',
label: {
text: 'Platinum III',
style: {
color: '#606060'
}
}
}, {
from: 13,
to: 13.99,
color: 'rgba(0, 79, 182, 0.1)',
label: {
text: 'Diamond I',
style: {
color: '#606060'
}
}
}, {
from: 14,
to: 14.99,
color: 'rgba(0, 79, 182, 0.1)',
label: {
text: 'Diamond II',
style: {
color: '#606060'
}
}
}, {
from: 15,
to: 15.99,
color: 'rgba(0, 79, 182, 0.1)',
label: {
text: 'Diamond III',
style: {
color: '#606060'
}
}
}, {
from: 15,
to: 15.99,
color: 'rgba(142, 89, 225, 0.1)',
label: {
text: 'Champion I',
style: {
color: '#606060'
}
}
}, {
from: 15,
to: 15.99,
color: 'rgba(142, 89, 225, 0.1)',
label: {
text: 'Champion II',
style: {
color: '#606060'
}
}
}, {
from: 15,
to: 15.99,
color: 'rgba(142, 89, 225, 0.1)',
label: {
text: 'Champion III',
style: {
color: '#606060'
}
}
}, {
from: 15,
to: 15.99,
color: 'rgba(249, 135, 254, 0.1)',
label: {
text: 'Grand Champion',
style: {
color: '#606060'
}
}
}]
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
}
},
navigation: {
menuItemStyle: {
fontSize: '10px'
}
},
series: [
{ name: 'Ranked Duel 1v1', data: [0,0,0,0,0,0] },
{ name: 'Ranked Doubles 2v2', data: [11,11,12,12,12,12] },
{ name: 'Ranked Solo Standard 3v3', data: [0,0,0,0,0,0] },
{ name: 'Ranked Standard 3v3', data: [0,0,0,0,0,0] },
{ name: 'Hoops', data: [0,0,0,0,0,0] },
{ name: 'Rumble', data: [0,11,11,11,11,11] },
{ name: 'Dropshot', data: [10,10,10,10,10,10] },
{ name: 'Snowday', data: [12,12] },
]
});
I'd like to get the information out of the series related to the ranked playlists. For example, I need to be able to get the first value corresponding to "Ranked Duel 1v1" and "Ranked Doubles 2v2" etc. so I can save that number in a csv.
I've tried searching by string like this:
$data = $tracker.tostring() -split "[`r`n]" | select-string "Ranked Standard 3v3"
Which gives me this as a result:
Ranked Standard 3v3
Ranked Standard 3v3
Ranked Standard 3v3
Ranked Standard 3v3
Ranked Standard 3v3
Ranked Standard 3v3
{ name: 'Ranked Standard 3v3', data:
[994,994,994,994,994,994] },
{ name: 'Ranked Standard 3v3', data: [0,0,0,0,0,0] },
I'm not sure how to parse it from there though. Thanks for any help!
Here's a sample of how to just get the 'Un-tracked' section:
# result ArrayList
$results = New-Object System.Collections.ArrayList
# REST Get
$tracker = Invoke-WebRequest -Uri https://rocketleague.tracker.network/profile/steam/adammast12
# HTML data
# $tracker.RawContent
# split by carriage return + new line
# select the JSON with "name:" in it
$data = $tracker.tostring() -split "`r`n" | Select-String "name:"
# Un-Ranked data
$unranked = $data | Select-String "name: 'Un-Ranked'"
# Split at []'s
$unrankedSplit = $unranked.ToString().Split('[').Split(']')
# this yields a result like this:
# { name: 'Un-Ranked', data:
# 1270,1270,1270,1270,1270,1251
# },
#
# Split again at the second position on each comma, position [1]
# since PowerShell is zero-based indexing
$unrankedSplitChild = $unrankedSplit[1].Split(',')
# loop through each item with custom objects
foreach($item in $unrankedSplitChild)
{
# create a PSCustomObject and add to to the results
$results += [PSCustomObject]#{Category="Un-Ranked";Data=$item}
}
# throw the results to the console
$results | Format-Table -AutoSize
I have been creating column charts using the google chart tool, but am struggling to add a Y axis to my charts. I just need a standard series of values to appear on the axis on the left hand side of the chart.
I am able to create and manipulate the X axis but the Y axis will not appear for some reason. I'm sure there is something simple I am missing here.
Also apologies if the following code is messy, I am pretty new to this.
<head>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
chartArea: { width: "100%"},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>
Thanks in Advance,
the y-axis is being hidden by chart option --> chartArea: {width: "100%"}
chartArea controls the size of the center section where the bars are,
and does not include the labels on either axis or at the top
use height & width outside of chartArea for the entire chart
if you want to maximize the chart area, then set limits on left, bottom, top, and / or right,
recommend replacing with the following...
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}
},
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using Highcharts js and I am trying to draw a pie chart with highCharts
which is a semicircle and some text embedded inside it.
and
Till now what I have made is
my html markup is
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-1" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-2" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-3" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
</div>
css used
.trends-pie-chart {
width: 100%;
margin-bottom: 30px;
}
and Js used
// Create the chart for Microsoft office
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-1',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#F4E998'] ,
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Microsoft Office',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
},function (chart) { // on complete
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
zIndex:100000
})
.add();
});
// Create the chart for azure
var chart_time = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-2',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#3EC1F9'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series : noBorder
},
tooltip: {
enabled: false,
},
title: {
text: 'Azure',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
// Create the chart for Cloud Storage
var chart_budget = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-3',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#6355FC'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Cloud Storage',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
tooltip: {
enabled: false,
animation: false,
backgroundColor: null
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
/*pie charts trends page*/
var noBorder = {
states:{
hover:{
halo: {
size: 1
}
}
}
};
You can change zIndex of your text by using .attr():
http://api.highcharts.com/highcharts#Element.attr
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
}).attr({
zIndex: 5
})
.add();
It will work because your text is svg/vml object.
example:
http://jsfiddle.net/dL6rebf5/22/
This looks like a z-index issue. But well, I have got a better solution. Not sure if it helps:
.wrap {position: relative; z-index: 1; width: 150px; height: 150px;}
.wrap span {top: 0; right: 0; width: 50%; line-height: 95px; background-color: #fff; z-index: 5; position: absolute; text-align: center; font-size: 2em; height: 50%; overflow: hidden;}
.wrap .outer-circle,
.wrap .inner-circle {position: absolute; border-radius: 100%; background-color: #00f; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 25px;}
.wrap .inner-circle {background-color: #fff; z-index: 3;}
<div class="wrap">
<span>75%</span>
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
</div>
Preview: