CODEWITHSUNDEEP
javascripthighcharts
Yahya
Yahya

Reputation: 540

HighCharts columns with striated columns

I am using highcharts to render some data. I want a column chart where the columns are striated or striped. Please could someone help me as to how this can be achieved.

Thanks.

Upvotes: 2

Views: 1119

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use patterns:

Image: http://jsfiddle.net/VmxPQ/

    var r = chart.renderer,
        pattern = r.createElement('pattern')
            .attr({
                id: 'pattern',
                patternUnits: 'userSpaceOnUse',
                x: 0,
                y: 0,
                width: 15,
                height: 15,
                viewBox: '0 0 10 10',
            })
            .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#ddd')
       .add(pattern);

   r.image('http://highcharts.com/demo/gfx/sun.png',0,0,30,30)

       .attr({
           stroke: '#333'
       })
       .add(pattern);



    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern2',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 15,
            height: 15,
            viewBox: '0 0 10 10',
        })
        .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#eee')
       .add(pattern);

    //hover status
    r.image('http://highcharts.com/demo/gfx/sun.png',0,0,30,30) 

       .attr({
           stroke: '#666'
       })
       .add(pattern);

Upvotes: 3

Related Questions