feat: support install font and enhance title padding

axis.go

@@ -73,6 +73,7 @@ type axisMeasurement struct {
 	Height int
 }
 
+// NewAxis creates a new axis with data and style options
 func NewAxis(d *Draw, data AxisDataList, option AxisOption) *axis {
 	return &axis{
 		d:      d,
@@ -112,6 +113,7 @@ func (as *AxisOption) Style(f *truetype.Font) chart.Style {
 }
 
 type AxisData struct {
+	// The text value of axis
 	Text string
 }
 type AxisDataList []AxisData

bar_chart.go

@@ -28,17 +28,20 @@ import (
 )
 
 type barChartOption struct {
+	// The series list fo bar chart
 	SeriesList SeriesList
-	Theme      string
+	// The theme
-	Font       *truetype.Font
+	Theme string
+	// The font
+	Font *truetype.Font
 }
 
 func barChartRender(opt barChartOption, result *basicRenderResult) ([]markPointRenderOption, error) {
-
 	d, err := NewDraw(DrawOption{
 		Parent: result.d,
 	}, PaddingOption(chart.Box{
-		Top:  result.titleBox.Height(),
+		Top: result.titleBox.Height(),
+		// TODO 后续考虑是否需要根据左侧是否展示y轴再生成对应的left
 		Left: YAxisWidth,
 	}))
 	if err != nil {
@@ -118,6 +121,7 @@ func barChartRender(opt barChartOption, result *basicRenderResult) ([]markPointR
 				X: x + barWidth>>1,
 				Y: top,
 			}
+			// 如果label不需要展示，则返回
 			if !series.Label.Show {
 				continue
 			}
@@ -135,6 +139,7 @@ func barChartRender(opt barChartOption, result *basicRenderResult) ([]markPointR
 			d.text(text, x+(barWidth-textBox.Width())>>1, barMaxHeight-h-5)
 		}
 
+		// 生成mark point的参数
 		markPointRenderOptions = append(markPointRenderOptions, markPointRenderOption{
 			Draw:      d,
 			FillColor: seriesColor,

chart.go

@@ -44,24 +44,45 @@ type Point struct {
 
 const labelFontSize = 10
 
+var defaultChartWidth = 600
+var defaultChartHeight = 400
+
 type ChartOption struct {
-	Type            string
+	// The output type of chart, "svg" or "png", default value is "svg"
-	Font            *truetype.Font
+	Type string
-	Theme           string
+	// The font family, which should be installed first
-	Title           TitleOption
+	FontFamily string
-	Legend          LegendOption
+	// The font of chart, the default font is "roboto"
-	XAxis           XAxisOption
+	Font *truetype.Font
-	YAxisList       []YAxisOption
+	// The theme of chart, "light" and "dark".
-	Width           int
+	// The default theme is "light"
-	Height          int
+	Theme string
-	Parent          *Draw
+	// The title option
-	Padding         chart.Box
+	Title TitleOption
-	Box             chart.Box
+	// The legend option
-	SeriesList      SeriesList
+	Legend LegendOption
+	// The x axis option
+	XAxis XAxisOption
+	// The y axis option list
+	YAxisList []YAxisOption
+	// The width of chart, default width is 600
+	Width int
+	// The height of chart, default height is 400
+	Height int
+	Parent *Draw
+	// The padding for chart, default padding is [20, 10, 10, 10]
+	Padding chart.Box
+	// The canvas box for chart
+	Box chart.Box
+	// The series list
+	SeriesList SeriesList
+	// The background color of chart
 	BackgroundColor drawing.Color
-	Children        []ChartOption
+	// The child charts
+	Children []ChartOption
 }
 
+// FillDefault fills the default value for chart option
 func (o *ChartOption) FillDefault(theme string) {
 	t := NewTheme(theme)
 	// 如果为空，初始化
@@ -83,7 +104,7 @@ func (o *ChartOption) FillDefault(theme string) {
 	}
 	if o.Padding.IsZero() {
 		o.Padding = chart.Box{
-			Top:    20,
+			Top:    10,
 			Right:  10,
 			Bottom: 10,
 			Left:   10,
@@ -102,10 +123,7 @@ func (o *ChartOption) FillDefault(theme string) {
 	}
 	if o.Title.Style.Padding.IsZero() {
 		o.Title.Style.Padding = chart.Box{
-			Left:   5,
+			Bottom: 10,
-			Top:    5,
-			Right:  5,
-			Bottom: 5,
 		}
 	}
 	// 副标题
@@ -113,7 +131,7 @@ func (o *ChartOption) FillDefault(theme string) {
 		o.Title.SubtextStyle.FontColor = o.Title.Style.FontColor.WithAlpha(180)
 	}
 	if o.Title.SubtextStyle.FontSize == 0 {
-		o.Title.SubtextStyle.FontSize = 10
+		o.Title.SubtextStyle.FontSize = labelFontSize
 	}
 	if o.Title.SubtextStyle.Font == nil {
 		o.Title.SubtextStyle.Font = o.Font
@@ -121,7 +139,7 @@ func (o *ChartOption) FillDefault(theme string) {
 
 	o.Legend.theme = theme
 	if o.Legend.Style.FontSize == 0 {
-		o.Legend.Style.FontSize = 10
+		o.Legend.Style.FontSize = labelFontSize
 	}
 	if o.Legend.Left == "" {
 		o.Legend.Left = PositionCenter
@@ -155,7 +173,18 @@ func (o *ChartOption) getWidth() int {
 	if o.Parent != nil {
 		return o.Parent.Box.Width()
 	}
-	return 600
+	return defaultChartWidth
+}
+
+func SetDefaultWidth(width int) {
+	if width > 0 {
+		defaultChartWidth = width
+	}
+}
+func SetDefaultHeight(height int) {
+	if height > 0 {
+		defaultChartHeight = height
+	}
 }
 
 func (o *ChartOption) getHeight() int {
@@ -166,7 +195,7 @@ func (o *ChartOption) getHeight() int {
 	if o.Parent != nil {
 		return o.Parent.Box.Height()
 	}
-	return 400
+	return defaultChartHeight
 }
 
 func (o *ChartOption) newYRange(axisIndex int) Range {
@@ -227,10 +256,18 @@ func (r *basicRenderResult) getYRange(index int) *Range {
 	return r.yRangeList[index]
 }
 
+// Render renders the chart by option
 func Render(opt ChartOption) (*Draw, error) {
 	if len(opt.SeriesList) == 0 {
 		return nil, errors.New("series can not be nil")
 	}
+	if len(opt.FontFamily) != 0 {
+		f, err := GetFont(opt.FontFamily)
+		if err != nil {
+			return nil, err
+		}
+		opt.Font = f
+	}
 	opt.FillDefault(opt.Theme)
 
 	lineSeries := make([]Series, 0)

draw.go

@@ -46,21 +46,30 @@ const (
 )
 
 type Draw struct {
+	// Render
 	Render chart.Renderer
-	Box    chart.Box
+	// The canvas box
-	Font   *truetype.Font
+	Box chart.Box
+	// The font for draw
+	Font *truetype.Font
+	// The parent of draw
 	parent *Draw
 }
 
 type DrawOption struct {
-	Type   string
+	// Draw type, "svg" or "png", default type is "svg"
+	Type string
+	// Parent of draw
 	Parent *Draw
-	Width  int
+	// The width of draw canvas
+	Width int
+	// The height of draw canvas
 	Height int
 }
 
 type Option func(*Draw) error
 
+// PaddingOption sets the padding of draw canvas
 func PaddingOption(padding chart.Box) Option {
 	return func(d *Draw) error {
 		d.Box.Left += padding.Left
@@ -71,6 +80,7 @@ func PaddingOption(padding chart.Box) Option {
 	}
 }
 
+// BoxOption set the box of draw canvas
 func BoxOption(box chart.Box) Option {
 	return func(d *Draw) error {
 		if box.IsZero() {
@@ -81,6 +91,7 @@ func BoxOption(box chart.Box) Option {
 	}
 }
 
+// NewDraw returns a new draw canvas
 func NewDraw(opt DrawOption, opts ...Option) (*Draw, error) {
 	if opt.Parent == nil && (opt.Width <= 0 || opt.Height <= 0) {
 		return nil, errors.New("parent and width/height can not be nil")
@@ -122,10 +133,12 @@ func NewDraw(opt DrawOption, opts ...Option) (*Draw, error) {
 	return d, nil
 }
 
+// Parent returns the parent of draw
 func (d *Draw) Parent() *Draw {
 	return d.parent
 }
 
+// Top returns the top parent of draw
 func (d *Draw) Top() *Draw {
 	if d.parent == nil {
 		return nil
@@ -141,6 +154,7 @@ func (d *Draw) Top() *Draw {
 	return t
 }
 
+// Bytes returns the data of draw canvas
 func (d *Draw) Bytes() ([]byte, error) {
 	buffer := bytes.Buffer{}
 	err := d.Render.Save(&buffer)

examples/demo/main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"bytes"
 	"net/http"
+	"strconv"
 
 	charts "github.com/vicanso/go-charts"
 	"github.com/wcharczuk/go-chart/v2"
@@ -65,7 +66,12 @@ func indexHandler(w http.ResponseWriter, req *http.Request) {
 	if req.URL.Path != "/" {
 		return
 	}
-	theme := req.URL.Query().Get("theme")
+	query := req.URL.Query()
+	theme := query.Get("theme")
+	width, _ := strconv.Atoi(query.Get("width"))
+	height, _ := strconv.Atoi(query.Get("height"))
+	charts.SetDefaultWidth(width)
+	charts.SetDefaultWidth(height)
 	chartOptions := []charts.ChartOption{
 		// 普通折线图
 		{

font.go

@@ -0,0 +1,61 @@
+// MIT License
+
+// Copyright (c) 2022 Tree Xie
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+package charts
+
+import (
+	"errors"
+	"sync"
+
+	"github.com/golang/freetype/truetype"
+	"github.com/wcharczuk/go-chart/v2/roboto"
+)
+
+var fonts = sync.Map{}
+var ErrFontNotExists = errors.New("font is not exists")
+
+func init() {
+	_ = InstallFont("roboto", roboto.Roboto)
+}
+
+// InstallFont installs the font for charts
+func InstallFont(fontFamily string, data []byte) error {
+	font, err := truetype.Parse(data)
+	if err != nil {
+		return err
+	}
+	fonts.Store(fontFamily, font)
+	return nil
+}
+
+// GetFont get the font by font family
+func GetFont(fontFamily string) (*truetype.Font, error) {
+	value, ok := fonts.Load(fontFamily)
+	if !ok {
+		return nil, ErrFontNotExists
+	}
+	f, ok := value.(*truetype.Font)
+	if !ok {
+		return nil, ErrFontNotExists
+	}
+	return f, nil
+}

font_test.go

@@ -0,0 +1,42 @@
+// MIT License
+
+// Copyright (c) 2022 Tree Xie
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+package charts
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/wcharczuk/go-chart/v2/roboto"
+)
+
+func TestInstallFont(t *testing.T) {
+	assert := assert.New(t)
+
+	fontFamily := "test"
+	err := InstallFont(fontFamily, roboto.Roboto)
+	assert.Nil(err)
+
+	font, err := GetFont(fontFamily)
+	assert.Nil(err)
+	assert.NotNil(font)
+}

legend.go

@@ -50,6 +50,7 @@ type LegendOption struct {
 	Orient string
 }
 
+// NewLegendOption creates a new legend option by legend text list
 func NewLegendOption(data []string, position ...string) LegendOption {
 	opt := LegendOption{
 		Data: data,
@@ -101,6 +102,8 @@ func (l *legend) Render() (chart.Box, error) {
 	legendDotHeight := 5
 	textPadding := 5
 	legendMargin := 10
+	// 往下移2倍dot的高度
+	y += 2 * legendDotHeight
 
 	widthCount := 0
 	maxTextWidth := 0

legend_test.go

@@ -23,6 +23,7 @@
 package charts
 
 import (
+	"fmt"
 	"testing"
 
 	"github.com/stretchr/testify/assert"
@@ -81,7 +82,7 @@ func TestLegendRender(t *testing.T) {
 					Style: style,
 				})
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 10\nL 30 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 76 10\nL 106 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"91\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"111\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 148 10\nL 178 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"163\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"183\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 20\nL 30 20\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 76 20\nL 106 20\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"91\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"111\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 148 20\nL 178 20\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"163\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"183\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
 			box: chart.Box{
 				Right:  214,
 				Bottom: 25,
@@ -102,7 +103,7 @@ func TestLegendRender(t *testing.T) {
 					Style: style,
 				})
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"191\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 222 10\nL 252 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"237\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"267\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 294 10\nL 324 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"309\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"339\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text><path  d=\"M 370 10\nL 400 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"385\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"191\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 222 20\nL 252 20\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"237\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"267\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 294 20\nL 324 20\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"309\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"339\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text><path  d=\"M 370 20\nL 400 20\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"385\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/></svg>",
 			box: chart.Box{
 				Right:  400,
 				Bottom: 25,
@@ -122,7 +123,7 @@ func TestLegendRender(t *testing.T) {
 					Style: style,
 				})
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 93 10\nL 123 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"108\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"128\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 169 10\nL 199 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"184\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"204\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 241 10\nL 271 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"256\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"276\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 93 20\nL 123 20\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"108\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"128\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 169 20\nL 199 20\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"184\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"204\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 241 20\nL 271 20\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"256\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"276\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
 			box: chart.Box{
 				Right:  307,
 				Bottom: 25,
@@ -143,10 +144,10 @@ func TestLegendRender(t *testing.T) {
 					Orient: OrientVertical,
 				})
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 10\nL 30 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 0 30\nL 30 30\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"30\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"35\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 0 50\nL 30 50\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"50\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"55\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 20\nL 30 20\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 0 40\nL 30 40\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"40\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"45\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 0 60\nL 30 60\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"15\" cy=\"60\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"35\" y=\"65\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
 			box: chart.Box{
 				Right:  61,
-				Bottom: 70,
+				Bottom: 80,
 			},
 		},
 		{
@@ -166,9 +167,9 @@ func TestLegendRender(t *testing.T) {
 			},
 			box: chart.Box{
 				Right:  101,
-				Bottom: 70,
+				Bottom: 80,
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 40 10\nL 70 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"15\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 40 30\nL 70 30\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"30\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"35\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 40 50\nL 70 50\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"50\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"55\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 40 20\nL 70 20\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"20\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"25\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 40 40\nL 70 40\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"40\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"45\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 40 60\nL 70 60\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><circle cx=\"55\" cy=\"60\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(255,255,255,1.0)\"/><text x=\"75\" y=\"65\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
 		},
 	}
 
@@ -178,6 +179,7 @@ func TestLegendRender(t *testing.T) {
 		assert.Nil(err)
 		assert.Equal(tt.box, b)
 		data, err := d.Bytes()
+		fmt.Println(string(data))
 		assert.Nil(err)
 		assert.NotEmpty(data)
 		assert.Equal(tt.result, string(data))

series.go

@@ -32,7 +32,9 @@ import (
 )
 
 type SeriesData struct {
+	// The value of series data
 	Value float64
+	// The style of series data
 	Style chart.Style
 }
 
@@ -57,9 +59,15 @@ func NewSeriesDataFromValues(values []float64) []SeriesData {
 }
 
 type SeriesLabel struct {
+	// Data label formatter, which supports string template.
+	// {b}: the name of a data item.
+	// {c}: the value of a data item.
+	// {d}: the percent of a data item(pie chart).
 	Formatter string
-	Color     drawing.Color
+	// The color for label
-	Show      bool
+	Color drawing.Color
+	// Show flag for label
+	Show bool
 }
 
 const (
@@ -69,27 +77,42 @@ const (
 )
 
 type SeriesMarkData struct {
+	// The mark data type, it can be "max", "min", "average".
+	// The "average" is only for mark line
 	Type string
 }
 type SeriesMarkPoint struct {
+	// The width of symbol, default value is 30
 	SymbolSize int
-	Data       []SeriesMarkData
+	// The mark data of series mark point
+	Data []SeriesMarkData
 }
 type SeriesMarkLine struct {
+	// The mark data of series mark line
 	Data []SeriesMarkData
 }
 type Series struct {
-	index      int
+	index int
-	Type       string
+	// The type of series, it can be "line", "bar" or "pie".
-	Data       []SeriesData
+	// Default value is "line"
+	Type string
+	// The data list of series
+	Data []SeriesData
+	// The Y axis index, it should be 0 or 1.
+	// Default value is 1
 	YAxisIndex int
-	Style      chart.Style
+	// The style for series
-	Label      SeriesLabel
+	Style chart.Style
-	Name       string
+	// The label for series
-	// Radius of Pie chart, e.g.: 40%
+	Label SeriesLabel
-	Radius    string
+	// The name of series
+	Name string
+	// Radius for Pie chart, e.g.: 40%, default is "40%"
+	Radius string
+	// Mark point for series
 	MarkPoint SeriesMarkPoint
-	MarkLine  SeriesMarkLine
+	// Make line for series
+	MarkLine SeriesMarkLine
 }
 type SeriesList []Series
 

title.go

@@ -142,7 +142,8 @@ func drawTitle(p *Draw, opt *TitleOption) (chart.Box, error) {
 	for _, item := range measureOptions {
 		item.style.WriteTextOptionsToRenderer(r)
 		x := titleX + (textMaxWidth-item.width)>>1
-		d.text(item.text, x, titleY)
+		y := titleY + item.height
+		d.text(item.text, x, y)
 		titleY += item.height
 	}
 	height := titleY + padding.Top + padding.Bottom

title_test.go

@@ -79,7 +79,7 @@ func TestDrawTitle(t *testing.T) {
 		{
 			newDraw:   newDraw,
 			newOption: newOption,
-			result:    "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"6\" y=\"0\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"0\" y=\"17\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"0\" y=\"34\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"3\" y=\"46\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
+			result:    "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"6\" y=\"17\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"0\" y=\"34\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"0\" y=\"46\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"3\" y=\"58\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
 			box: chart.Box{
 				Right:  43,
 				Bottom: 58,
@@ -93,7 +93,7 @@ func TestDrawTitle(t *testing.T) {
 				opt.Top = "50"
 				return opt
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"363\" y=\"50\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"357\" y=\"67\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"357\" y=\"84\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"360\" y=\"96\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"363\" y=\"67\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"357\" y=\"84\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"357\" y=\"96\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"360\" y=\"108\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
 			box: chart.Box{
 				Right:  400,
 				Bottom: 108,
@@ -107,7 +107,7 @@ func TestDrawTitle(t *testing.T) {
 				opt.Top = "10"
 				return opt
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"185\" y=\"10\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"179\" y=\"27\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"179\" y=\"44\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"182\" y=\"56\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"185\" y=\"27\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"179\" y=\"44\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"179\" y=\"56\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"182\" y=\"68\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
 			box: chart.Box{
 				Right:  222,
 				Bottom: 68,
@@ -121,7 +121,7 @@ func TestDrawTitle(t *testing.T) {
 				opt.Top = "10"
 				return opt
 			},
-			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"46\" y=\"10\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"40\" y=\"27\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"40\" y=\"44\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"43\" y=\"56\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"46\" y=\"27\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">title</text><text x=\"40\" y=\"44\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:17.9px;font-family:'Roboto Medium',sans-serif\">Hello</text><text x=\"40\" y=\"56\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">subtitle</text><text x=\"43\" y=\"68\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,255,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">World!</text></svg>",
 			box: chart.Box{
 				Right:  83,
 				Bottom: 68,